This post will show how to install WordPress blog under Ubuntu I've prepared a video describing the process, and you might be interested in following a whole course.
We'll be using the default blog directory of /usr/share/nginx/html, so if you have a different one like /var/www/html please use it instead.
The first step is to get the WordPress system from wordpress.org
in a terminal type:
cd /tmp
wget http://wordpress.org/latest.tar.gz
then we unpack the archive
tar -zxvf latest.tar.gz
and move to our blog directory
mv wordpress/ /usr/share/nginx/html/
next, we change the group and owner of this directory to www-data, which is needed by our web-server to have access to the files:
then give permissions for all users in this owner to read, write and execute(7) files in the blog directory, and for the group and other users just to be able to read and execute files(5):
chmod -R 755 /usr/share/nginx/html/wordpress
we set the same rules to be automatically applied for any sub-directory to be created within /wordpress/, to serve image or other uploads, plugins etc.
sudo chmod g+s /usr/share/nginx/html/wordpress
Then we launch mysql client
mysql -u root
and lets create the default wordpress database:
CREATE DATABASE wordpress;
create one user wp_user in order to have access to our wordpress database:
CREATE USER wp_user IDENTIFIED BY 'wp_pass';
and give permissions to wp_user to be able to create tables, insert data etc. inside the wordpress database:
GRANT ALL PRIVILEGES ON wordpress.* TO wp_user;
now is time to set up the default configuration of our blog to use this database so we go to our blog directory, rename and use the default config file:
mv wp-config-sample.php wp-config.php
then open it up for editing via:
sudo nano wp-config.php
just change these three to ensure that WordPress will have access to MySQL:
define('DB_NAME', 'wordpress');
set database user name:
define('DB_USER', 'wp_user');
set database password
define('DB_PASSWORD', 'wp_pass');
finally, open up a browser and type:
http://localhost/wordpress/index.php
then follow the steps and your WordPress installation is ready!
This post will describe how to install how to set up a brand new website hosting using the following software technologies: webserver: Nginx, language: PHP, database: MySQL, and set up ssh secure shell and FTP access under Linux Ubuntu 19.04.
Knowing how to install these services is essential when developing web applications, it is also very useful while taking comprehensive course projects, which prefer local installations.
We start with installing the ssh server so in the console ( terminal ) start typing the following commands:
sudo apt install openssh-server
then we start the server:
sudo systemctl start sshd
from now on we can access our server via: ssh 192.168.100.1 -l myuser just replace your IP address and the user parameters
NGINX
install the Nginx server
sudo apt-get install nginx
edit the sites directive and ...
sudo nano /etc/nginx/sites-available/default
and place the following information, replacing the server_name IP address with your own(check it with the 'ifconfig' command) and if you wish the root directory of the server:
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /usr/share/nginx/html;
index index.php index.html index.htm;
and make sure that the user www-data; is present!
restart Nginx to apply the settings
sudo systemctl restart nginx
then if you type: http://your_ip_address/ the webserver should give you a webpage!
MYSQL
install the MySQL server
sudo apt install mysql-server
automatically set up default permissions for databases, remove users and restrict access
sudo mysql_secure_installation
change ownership of MySQL directory in order to have database access from the MySQL client / or API interface running on PHP applications
sudo chown mysql:mysql mysql/ -R
change connection of MySQL from a socket to password authentication:
sudo mysql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
next, apply the changes with:
FLUSH PRIVILEGES;
EXIT
optional: add DB permissions in order for the MySQL interface used by PHP to access the databases and tables
open up MySQL. When asked for password type "password"
mysql -u root -p
give privileges: replace your_database with the DB you want to access from within PHP and your_user with a chosen user, you want to give privileges on:
GRANT ALL PRIVILEGES ON your_database.* TO 'your_user'@'%' WITH GRANT OPTION;
FTP SERVER
install FTP server vsftpd
sudo apt install vsftpd
edit the vsftpd configuration file:
sudo nano /etc/vsftpd.conf
make sure that these are uncommented (without ; in front of the line)
(& create PHPMyAdmin with user and password of your choice)
create a symbolic link from the default HTML directory of Nginx to PHPMyAdmin so it can be browsed via http://your_host/phpmyadmin (where your_host could be 127.0.0.1 or you IP address)
give permissions of any owner and member of this www-data group to read and write files in the default website directory (for FTP and console access)
sudo chmod -R 775 /usr/share/nginx/html/
set sticky bit for anyone who is a member of the group www-data to create new files and directories with default read write and execute permissions.
sudo chmod g+rwxs /usr/share/nginx/html
add our user $USER to be a member of the www-data group, which is the default group of Nginx server (to enable writing into files)
add our user $USER to the www-data group
sudo usermod -a -G www-data $USER
note: you'll have to re-login in the server to see the effect of creating new files and directories or the alternative is to type: newgrp www-data and test the changes!
That's it, enjoy and happy coding. And if you want to learn more on Ubuntu administration you can try this
course
The following code will analyze each and every link on your webpage in a way so when a user clicks on a link it will store its location in browser's localStorage. The code first loops over the links, placing event handlers on their click event. Then when a user clicks on a link it checks for its existence in the local-storage array and if not pushes it there. At the same time adds the class 'visited' to all visited links found in the array.
If you would like to understand more of its internal functionality, I would suggest taking a look at the comprehensive course: JavaScript for beginners - learn by doing
function check_visited_links(){
var visited_links = JSON.parse(localStorage.getItem('visited_links')) || [];
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var that = links[i];
that.onclick = function () {
var clicked_url = this.href;
if (visited_links.indexOf(clicked_url)==-1) {
visited_links.push(clicked_url);
localStorage.setItem('visited_links', JSON.stringify(visited_links));
}
}
if (visited_links.indexOf(that.href)!== -1) {
that.parentNode.className += ' visited';
}
}
}
if you want to add some styling just add the following CSS rule:
Ready to use popup report form with radio buttons built using pure JavaScript and CSS. If you would like to understand more of its internal functionality, I would suggest taking a look at this comprehensive course:
<script type="text/javascript">
function report(c_id) {
var form = document.createElement("form", "report_form");
form.id = "report_form";
form.method = "post";
form.action = "index.php?mode=post_comment";
var reply_place = document.createElement("div");
reply_place.id = "overlay";
var inner_div = document.createElement("div"), button_close = document.createElement("button");
button_close.id = "upprev_close";
button_close.innerHTML = "x";
button_close.onclick = function () {
var element = document.getElementById('overlay');
element.parentNode.removeChild(element);
};
inner_div.appendChild(button_close);
var legend = document.createElement("legend");
legend.innerHTML = "Why do you want to report this?";
form.appendChild(legend);
var input1 = document.createElement("input");
input1.type = "radio";
input1.id = "nudity";
input1.value = "nudity";
input1.name = "options";
var radio_label1 = document.createElement("label");
radio_label1.htmlFor = "nudity";
radio_label1_text = "Nudity";
radio_label1.appendChild(document.createTextNode(radio_label1_text));
form.appendChild(input1);
form.appendChild(radio_label1);
var input2 = document.createElement("input");
input2.type = "radio";
input2.id = "attacks";
input2.value = "attacks";
input2.name = "options";
var radio_label2 = document.createElement("label");
radio_label2.htmlFor = "attacks";
radio_label2_text = "Personal attack";
radio_label2.appendChild(document.createTextNode(radio_label2_text));
form.appendChild(input2);
form.appendChild(radio_label2);
var input3 = document.createElement("input");
input3.type = "radio";
input3.id = "spam";
input3.value = "spam";
input3.name = "options";
var radio_label3 = document.createElement("label");
radio_label3.htmlFor = "spam";
radio_label6_text = "Spam";
radio_label3.appendChild(document.createTextNode(radio_label6_text));
form.appendChild(input3);
form.appendChild(radio_label3);
var submit_btn = document.createElement("input", "the_submit");
submit_btn.type = "submit";
submit_btn.className = "submit";
submit_btn.value = "Report";
form.appendChild(submit_btn);
submit_btn.onclick = function () {
var checked = false, formElems = this.parentNode.getElementsByTagName('input');
for (var i = 0; i < formElems.length; i++) {
if (formElems[i].type == 'radio' && formElems[i].checked == true) {
checked = true;
var el = formElems[i];
break;
}
}
if (!checked) return false;
var poststr = "c_id=" + c_id + "&reason=" + encodeURI(el.value);
alert(poststr);
return false;
}
inner_div.appendChild(form);
reply_place.appendChild(inner_div);
var attach_to = document.getElementById("wrapper"), parentDiv = attach_to.parentNode;
parentDiv.insertBefore(reply_place, attach_to);
}
</script>
<span style="cursor:pointer;cursor:hand;" onclick="report(127);">Report this!</span>
<div id="wrapper"></div>
As you can see to trigger the modal form you'll have to run the function report(); whereas input parameter you could pass the id of an item, article or comment you want to report.
Another example is this small JavaScript function that will invoke itself after
15 seconds, fading the screen and placing a box with asynchronously loaded Facebook like button. It's very useful if you want to promote a
page in front of your visitors. Usage: just replace place_your_application_id with your facebook application id
which you can find here: https://developers.facebook.com/apps
<script>
function fb_pop(){
var b = document.getElementsByTagName("body")[0], d = document.createElement("div");
d.id = "facebook_overlay";
var c = document.createElement("div");
c.id = "dyn_facebook";
c.innerHTML = 'Do you like this page? <div id="fb-root"></div><fb:like layout="button_count" show-faces="false" send="false" href="' + document.URL + '" width="150px"></fb:like><span id="facebookClose">X</span>';
b.appendChild(d);
b.appendChild(c);
a = document.createElement("script");
a.src = "//connect.facebook.net/en_US/all.js#appId=place_your_application_id&xfbml=1";
a.async = !0;
a.id = "fbjssdk";
b.parentNode.insertBefore(a, b);
document.getElementById("facebookClose").onclick = function() {
c.style.visibility = "hidden";
d.style.visibility = "hidden"
}
}
setTimeout(fb_pop, 15000);
</script>
The following two techniques will definitely speed up your web page loading times if you want to use social sharing buttons.
The action performed by the first technique is simple:
1) Do not load or render third party resources (i.e. external javascript files) until visitor places the mouse over the social buttons.
2) Mimic social buttons appearance via simple images.
3) When the user hovers the buttons, temporarily used images are being hidden and replaced by the original buttons from Google, Facebook, LinkedIn, etc.
Here is more info on the subject: http://www.rustybrick.com/javascript-hover-effects-to-speed-up-page-load-time.html
First place div tag with id = sharebox and put simple .png mock-up graphics of the social buttons inside.
<div id=sharebox > <img src="social.png" /> </div>
Then add this simple working JavaScript code placed below:
document.getElementById('social_share').addEventListener("mouseenter", load_scripts);
function load_js_script(src, call_back) {
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = src;
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);
scriptTag.onload = function () {
if (typeof call_back != 'undefined') {
call_back();
}
};
}
function load_scripts(e) {
e.target.innerHTML = '';
if (typeof twttr != 'undefined') {
twttr.widgets.load();
} else {
load_js_script('//platform.twitter.com/widgets.js');
}
if (typeof FB != 'undefined') {
FB.init({
status: true,
cookie: true,
xfbml: true
});
} else {
load_js_script("//connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({
status: true,
cookie: true,
xfbml: true
});
});
}
if (typeof gapi != 'undefined') {
var gplus = document.getElementByClassName('g-plusone');
gapi.plusone.render(gplus);
} else {
load_js_script('https://apis.google.com/js/plusone.js');
}
if (typeof IN != 'undefined') {
IN.parse();
} else {
load_js_script("//platform.linkedin.com/in.js");
}
}
Second and faster way of loading those buttons is by using specially styled Iframes. This way we are not loading the third-party libraries locally such as all.js or plusone.js which speeds the code significantly. Here is how:
document.getElementById('social_share').addEventListener("mouseenter", load_scripts);
function load_scripts() {
e.target.innerHTML = '';
makeIframe("https://plusone.google.com/_/+1/fastbutton?url=http://tools.royalsbg.com/test_social.html&size=medium&count=false", "google_slot");
makeIframe("https://www.facebook.com/plugins/like.php?href=http://tools.royalsbg.com/test_social.html", "facebook_slot");
}
function makeIframe(url, call_id) {
var iframe = document.createElement('iframe');
iframe.id = call_id;
iframe.src = url;
document.body.appendChild(iframe);
}
P.S. These are just sample images. Please use/create placeholder images of your own taste.
Cheers!
After having a day of manually cleaning about 300+ leftovers of the newest version of timthumb.php malware here is a working exploit cleaner that you can use it to check your whole web server for vulnerabilities and automatically clean his mess:
Usage: just save and run the following .php file from the root directory of your domain.
What are the click heat maps?
Heat maps are places on your website where users mostly click or hover their mouse. They are also known as website hot spots.
If you want to learn more about the JavaScript techniques you can visit the JavaScript course.
Why do you need to know your website hotspots?
Once knowing their location you can reorder your important information, optimize your adverts to increase their CTR(click-through-rate), etc...
Remember that this type of click tracking is different from the simple web counters. Click heatmaps map the exact x,y clicks, and mouse hover positions. That makes such statistics really great for those who look for usability improvements.
Of course, there are free services such as Creazyegg.com and Clickdensity.com but the offered JavaScript actually slows down the user experience. So the following is a guide on on how to build your own heatmap tracking. I've combined 2 techniques so the AJAX script could work across multiple domains. Here are their respected versions URLs:
for the heatmap: http://blog.corunet.com/english/the-definitive-heatmap
for the cross-domain AJAX: http://blog.cbciweb.com/articles/tag/asynchronousjavascriptacrossdomains
INSTRUCTIONS:
1. Create an empty readable and writeable file: clickcount.txt on your webserver.
2. Place the following javascript code in your website just above the ending tag:
var xOffset,yOffset;
var tempX = 0;
var tempY = 0;
//detect browser
var IE = document.all?true:false
//find the position of the first item on screen and store offsets
//find the first item on screen (after body)
var firstElement=document.getElementsByTagName('body')[0].childNodes[1];
//find the offset coordinates
xOffset=findPosX(firstElement);
yOffset=findPosY(firstElement);
if (IE){ // In IE there's a default margin in the page body. If margin's not defined, use defaults
var marginLeftExplorer = parseInt(document.getElementsByTagName('body')[0].style.marginLeft);
var marginTopExplorer = parseInt(document.getElementsByTagName('body')[0].style.marginTop);
/*assume default 10px/15px margin in explorer*/
if (isNaN(marginLeftExplorer)) {marginLeftExplorer=10;}
if (isNaN(marginTopExplorer)) {marginTopExplorer=15;}
xOffset=xOffset+marginLeftExplorer;
yOffset=yOffset+marginTopExplorer;
}
/*attach a handler to the onmousedown event that calls a function to store the values*/
document.onmousedown = getMouseXY;
/*Functions*/
/*Find positions*/
function findPosX(obj){
var curleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}else if (obj.x){
curleft += obj.x;
}
return curleft;
}
function findPosY(obj){
var curtop = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}else if (obj.y){
curtop += obj.y;
}
return curtop;
}
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {
tempX = e.pageX
tempY = e.pageY
}
tempX-=xOffset;
tempY-=yOffset;
var url='http://yourwebsite.com/scripts/empty.php' /* Type your website URL here*/
url = url + '?x='+tempX+'&y='+tempY;
ajad_send(url);
return true;
}
var ajad_ndx_script = 0;
function ajad_do (u) {
// Create new JS element
var js = document.createElement('SCRIPT');
js.type = 'text/javascript';
ajad_ndx_script++;
js.id = 'ajad-' + ajad_ndx_script;
js.src = u;
// Append JS element (therefore executing the 'AJAX' call)
document.body.appendChild(js);
return true;
}
function ajad_get (r) {
// Create URL
// Do AJAD
return ajad_do(r);
}
function ajad_send(url) {
// referrer
// send it
ajad_get(url);
// remove the last script node.
document.body.removeChild(document.getElementById('ajad-' + ajad_ndx_script));
ajad_ndx_script--;
}
4. Statistics
Allow at least 2 days for the clicks to accumulate. If you open clickcount.txt in your browser you'll see the x,y coordinates of the user clicks.
In order to visualize the gathered data create file click_count.php with the following contents:
