This lesson describes step-by-step how to build a website’s base structure using PHP. It is what WordPress does before sending your website to your user. Remember that the basic function of all content management systems is to separate layout (theme programming) and data (content creation and delivery). Yet a user always sees the website as a whole. That re-integration of layout and content is what we will discuss within the last four lessons.
Let us start by showing you how a basic PHP skeleton structures different elements of your website: your theme files (e.g. your header and footer) and your content and pages file.
If you attempt to follow this course, you should have at least read the following articles first:
However it is even better if you read all previous articles 🙂
There are various parts of your website which always stay the same. Think of your header and your footer for example. For integrity and maintenance reasons we only want to load content that is different from one request to another. All other content will be created once and integrated when needed.
Otherwise you would need to copy/paste your header and footer code for every sub page you are creating. This can result in errors and is hard to maintain since you’ll have to change every single page for just one tiny header detail, for example.
First of all you should think about what pages your website shall consist of, for example:
If you know that, think about the basic layout of your website, for example:
You could also think about a sidebar etc., but we will not focus on positioning elements for now. At first we want to clarify the technical background required to build your skeleton.
The “request/response switch” we are about to develop will integrate the following PHP capabilities:
This article will demonstrate how to use those aspects for your advantage.
Let’s talk about the base structure of your base structure 🙂
The following code shows header, content and footer areas, each of which include other PHP files.
1 2 3 4 5 6 7 8 | <html><?php include "inc-pages.php"; ?> <head><title>...</title></head> <body> <div id="header"><?php include "inc-header.php" ?></div> <div id="content"><?php include "inc-content.php" ?></div> <div id="footer"><?php include "inc-footer.php" ?></div> </body> </html> |
You can save this file as your future index.php. It is carrying both our request/response switch and the actual content files. You may have noticed that there is an additional file called in-pages.php included at the top. We will cover this in a second.
You also see that there are so called DIV-tags with IDs. You can ignore this for now, I just put it there for you to have a mental marker on how to beautify your website later on using Cascading Style Sheets (CSS). However there is no need to talk about colors and border thickness at this point, since we want to learn how that stuff works technically.
So how does it work? 🙂
The files inc-header.php and inc-footer.php are directly responsible to deliver desired content. inc-header.php could show an image, inc-footer.php could print your copyright information. I will not go deeper here, since it’s entirely up to you what to include within those files, e.g. login forms.
However it is a good idea to include your menu within inc-header.php. By menu I mean your links pointing to index.php?section=home, for example. We will discuss this shortly.
To be able to load different kinds of content files, we first need to define which files to load and by which name to call requests upon them. The actual loading process is done within the inc-content.php, which we will cover in a second. The file inc-pages.php is just to define an array which we will call $files[], which shall look like this:
1 2 3 4 5 6 7 | <?php $files = array(); $files['home'] = "content-home.php"; $files['about'] = "content-about.php"; $files['privacy'] = "content-privacy.php"; $files['contact'] = "content-contact.php"; ?> |
You notice that we are defining four positions within that array: home, about, privacy and contact. Those are pages that we discussed earlier as our website content. Each of these positions point to a simple string. That string is carrying a file name, which we will use in a second.
Now we will make everything work. The following code is your way to respond to various link requests using the $files[] array as reference:
1 2 3 4 5 6 7 8 9 | <?php if ( isset( $_GET["section"] ) AND isset( $files[ $_GET["section"] ] ) ) { include $files[$_GET["section"]]; } else { include $files[$_GET["home"]]; } ?> |
Let’s talk about what we’re doing right here. First of all inc-content.php asks if a GET parameter is set AND if the value of that GET parameter is defined within the array $files[]. If both is the case, the file belonging to that request is being included.
Example: Your menu (within inc-header.php) carries a link with anchor text “Home” and link target “index.php?section=home”. If the user clicks on “Home”, inc-content.php recognizes a parameter called “section” with value “home”. It further looks up if $files[“home”] exists. Since this is the case, the file “content-home.php” (as defined in inc-pages.php) is included.
If there is either no section parameter set or the value of section is not within the $files[] array, the home page (content-home.php) is loaded.
I am fully aware that there are thousands of other ways to implement such a switch. The advantage of the solution above, however, is that you do not have to touch the actual switching functionality ever. You just include more positions within your $files[] array, and add some more links to your menu.
You can now use this skeleton frame to build a website delivering the content you need. Within the next lessons we will concentrate on database functionality, used to actually fill the content file with the data from your database (e.g. the text of your post in WordPress).
This lesson describes step-by-step how to connect to a MySQL database using PHP. It is a necessary step to enable your PHP script to read data out of your database. Otherwise WordPress could not read the content of your post and would only present an empty theme to your user. We are bridging the worlds of PHP and MySQL.
If you want to provide content coming from a database, you will at least have to know the following functions:
There are different scenarios of data readout we want to take a look at.
The following code is an example on how to do a full PHP – database interaction roundtrip:
1 2 3 4 5 6 7 | <?php $server = "dbs.your-domain.com"; $user = "bob"; $password = "P4ssW0rD!"; $database = "wordpress"; $conn = mysqli_connect($server, $user, $password, $database); ?> |
The code above enables you to build a working database connection from your PHP script. However we have not read any data yet.
1 2 3 4 5 | <?php $stmt = mysqli_query($conn, "SELECT TEXT FROM TEST") or die ( mysql_error() ); $row = mysqli_fetch_row($stmt); echo $row[0]; // gives the first item of TEXT in TEST ?> |
The last two lines will allow data readout, but only for the first row of one attribute.
If you wanted to read all rows of table TEST for attribute TEXT you’d have to use a WHILE loop as discussed earlier:
1 2 3 4 5 6 | <?php $stmt = mysqli_query($conn, "SELECT TEXT FROM TEST") or die ( mysql_error() ); while ($row = mysqli_fetch_row($stmt)) { echo $row[0]; // gives the current item of TEXT in TEST } ?> |
The WHILE loop above enables you to echo all values of attribute TEXT in TEST.
If you wanted to read all rows of table TEST for more than one attribute you can do the following:
1 2 3 4 5 6 7 8 9 | <?php $stmt = mysqli_query($conn, "SELECT ID, TEXT FROM TEST") or die ( mysql_error() ); $column_count = mysqli_num_fields($stmt); while ($row = mysqli_fetch_row($stmt)) { for ($j = 0; $j < $column_count; $j++) { echo $row[$j]; // gives the current item of the current attribute in TEST } } ?> |
You notice that we put a FOR loop inside the WHILE loop which counts through every column (attribute) of the table we are fetching.
The advantage of the code above is that you can re-use it for any table and any attribute you like.
I hope this part of our PHP MySQL tutorial article helps you in getting started with understanding the bridge between PHP and MySQL. We will now focus on actual data readouts, by using a common problem: a login script with database user data.
This lesson will give you a step by step guide on how to build a login script using PHP and MySQL. You will get a better understanding how a content management system like WordPress communicates with a database, selects data from it, and processes that data to give final HTML code to a user’s browser.
First of all we are going to need a database table carrying our login information as a reference. We could use the following table to do that:
1 2 3 4 5 | create table user ( id int(20) primary key auto_increment, username varchar(120) unique, password varchar(120) ) |
The attribute “id” is just to have a fast integer based way of sorting and processing our user information. It is our primary key and will be incremented automatically by the DBMS if a new row is inserted.
The next attribute “username” is a text column carrying our unique username.
The last attribute “password” is also a text column carrying the password for each user, whereas that does not have to be unique. Furthermore we sure want to place a hash value here instead of our clear text password, but that will be done later using PHP.
For now, that table is in charge of holding our login information. We will insert a few users:
1 2 3 | insert into user values (null, 'bob', 'secret'); insert into user values (null, 'paul', 'god'); insert into user values (null, 'sandra', 'flower'); |
We notice that we will just use clear text passwords for now, just to make it easier to understand how stuff works. I will cover a more secure way of storing password information shortly.
As discussed within this article we will have to construct a little login form which deals with POST parameters. We could use the following code within a file “login-form.html”:
1 2 3 4 5 6 7 8 9 | <html><head><title>Login form</title></head> <body> <form action="user-login-processing.php" method="POST" enctype="text/plain"> Username: <input type="text" name="username" value="" /><br /> Password: <input type="password" name="password" value="" /><br /> <button type="submit" value="Login">Login</button> </form> </body> </html> |
That’s all we need for a basic HTML login form. The user is asked for his username and his password. Then when he clicks the Login button, the form and its parameters will get forwarded to the PHP script “user-login-processing.php” using POST method.
Now let’s see what our script “user-login-processing.php” needs to do.
As discussed within this article we will first have to connect to our database. We do that as follows:
1 2 3 4 5 6 7 8 | <?php $server = "dbs.your-domain.com"; $user = "bob"; $password = "P4ssW0rD!"; $database = "wordpress"; mysql_connect($server, $user, $password); mysql_select_db($database); ?> |
Once connected, we are able to process our parameters.
The first thing to do is to grab our parameters:
1 2 3 4 | <?php $username = @$_POST["username"]; $password = @$_POST["password"]; ?> |
The code above stores our user input values inside variables having the same name as our parameters do. That’s just to make things as easy as possible. The @-sign is to ignore missing parameter values.
As soon as we’re both connected and parameter-ready, we can ask our database if a user exists with the credentials provided within the login form.
What is going on in the code below is discussed within this article. The important thing here, however, is the fact that we’re asking the database if there is a row for two specific conditions — both username and password values must be present.
Since our username is unique, there won’t ever be a second data record. Still there could be no row at all if either the username or the password is wrong. We’re looking for a perfect match for those two attribute values.
1 2 3 4 5 6 7 8 9 | <?php $sql="select id from user where username = '$username' and password = '$password'"; $stmt = mysql_query($sql) or die ( mysql_error() ); //$row = mysql_fetch_row($stmt); //if we wanted to test our statement //echo $row[0]; //if we wanted to test our statement $num_rows = mysql_num_rows($stmt); if ($num_rows == 1) { echo "You are logged in"; } else { header('Location: login-form.html'); } ?> |
The attribute that is actually selected is, in our case, “id”. That is irrelevant and just serves the purpose to actually have a result in case of a found match.
If there is a match, you will see “You are logged in”. If there is no match, the script will head back to the login form.
This is the full blown version of the code discussed above.
The HTML login formular “login-form.html”:
1 2 3 4 5 6 7 8 9 | <html><head><title>Login form</title></head> <body> <form action="user-login-processing.php" method="POST" enctype="text/plain"> Username: <input type="text" name="username" value="" /><br /> Password: <input type="password" name="password" value="" /><br /> <button type="submit" value="Login">Login</button> </form> </body> </html> |
The PHP target script “user-login-processing.php” used for login:
<?php // parameter grabbing $username = @$_POST["username"]; $password = @$_POST["password"]; // database connection $server = "dbs.your-domain.com"; $user = "bob"; $password = "P4ssW0rD!"; $database = "wordpress"; mysql_connect($server, $user, $password); mysql_select_db($database); // initiate login procedure $sql="select id from user where username = '$username' and password = '$password'"; $stmt = mysql_query($sql) or die ( mysql_error() ); //$row = mysql_fetch_row($stmt); //if we wanted to test our statement //echo $row[0]; //if we wanted to test our statement $num_rows = mysql_num_rows($stmt); // login successfull? if ($num_rows == 1) { echo "You are logged in"; // do your stuff } else { header('Location: login-form.html'); } ?> |
A great video tutorial serving the same purpose as this blog article with just slightly different code follows right here:
I hope this helps you in getting started. Enjoy! 😉
The code above is not the most secure 🙂 You may want to fight SQL injection and other sorts of manipulation. I’m currently thinking about an entire section on PHP and MySQL security within this blog.
For now, please at least use the following procedure to not store your passwords as clear text within your database.
The following code will produce a hashed version of “asdf” as a possible (insecure) password.
1 2 3 | <?php echo sha1("asdf"); ?> |
You can use sha1($password) within the code snippets above to hash the user’s password input right after grabbing it as a parameter value and right before sending it to the database. That procedure will result in the same answer — to either have a username/password match or to have none.
However it requires you to store hashed passwords within the database in the first place. You can use the echo sha1() code above to look up your desired hash value.
Furthermore you may want to escape your parameters, etc. — just take a look at the video above for a little more security.
Even though we use a common problem to demonstrate how data is being read out of a database, the basic lesson you need to understand is this: First you need to make a database connection using your PHP script. Then you use that connection to ask the database for certain information. Finally you use the data obtained from the database to process it further, for example by echoing that data or by changing the user’s heading – like in our login example.
That roundtrip is what we talked about in the very beginning. All that is left for a user’s visit cycle to complete is to return that result as HTML that a browser can understand, while supporting functionality to request changes to the database. That is what we will cover in our final lesson.
This lesson gives a step-by-step description on how to dynamically read data coming from a MySQL database and how to both visualize and edit that data using HTML table and form markup. This brings everything together that we have discussed in previous lessons. It is also what WordPress does to provide the full technical cycle of a user’s visit from his initial request to receiving the final HTML result in his browser.
Let’s assume we want to build a Comic management database application handling data like this:
If a user clicks “Delete” the entry will be removed from the database accordingly.
If a user clicks “Edit” he will see a form like this:
Finally, if a user clicks “Create new comic” he will see a form like this:
This article will cover everything technically necessary to develop what you see above. However I will not go into visual styles here.
Let’s take a look at the database tables we need to achieve this.
Let us assume that ID and Name are both direct attributes of a Comic, and Publisher is a foreign key ID of another table called Publishers.
ID | Comic_Name | Publisher_ID |
---|---|---|
7 | The Incredible Hulk | 0 |
9 | Superman | 1 |
Then table Publisher will have to look like this:
ID | Publisher_Name |
---|---|
0 | Marvel |
1 | D.C. |
With those two tables present, what do we need to program?
As discussed previously in this PHP MySQL tutorial, we can connect to the database and use the following code to read data coming from MySQL using PHP WHILE loop inside a content-start.php surrounded by header and footer as discussed previously:
<?php echo "<table>"; $stmt = mysql_query("SELECT ID, Comic_Name, Publisher_Name from COMIC, PUBLISHER where COMIC.Publisher_ID = PUBLISHER.ID order by COMIC.Title"); while ($row = mysql_fetch_row($stmt)) { echo "<tr>"; for ($j = 0; $j < 3; $j++) { // we're expecting three attributes echo "<td>".$row[$j]."</td>"; // gives the current item of the current attribute } echo " <td><a href="index.php?section=comic&function=edit&id=$row[0]">Edit</a></td>"; echo " <td><a href="index.php?section=comic&function=delete&id=$row[0]">Delete</a></td>"; echo "</tr>"; } echo "<table>"; echo "<a href="index.php?section=comic&function=new">Create new comic</a>"; ?> |
However there are a few things new here:
If a user clicks “Delete”, we have to somehow send a SQL delete statement to the database.
The first step is already done. Looking at the code above, we see that the link with the anchor text “Delete” already possesses the ID of each comic to be deleted. That leaves us with the following tasks:
Since the link says “index.php?section=comic&function=delete&id=$row[0]” we first need to remember where we are right now. I still assume that you’re using the navigational skeleton as described here. If that is the case, you already solved the problem of directing the user to the comic section, whereas a specific file is being loaded, let’s say content-comic.php.
Inside that file, we now have to grab an additional parameter called “function”, since we want to distinguish between creating, editing and removing comics. Secondly, we need to grab the transported ID. We do both as described within the inter-script parameter article:
<?php $function = $_GET["function"]; $comic_id = $_GET["id"]; if ($function == "delete") { $sql = "delete from COMIC where ID = $comic_id"; mysql_query($sql); header('Location: index.php?section=comic'); } ?> |
That was the easy part.
Now things get a little more complex. While we can use the same mechanism as described above to grab the function “edit”, we have to do a little more stuff in order to give each user the opportunity to modify the information.
First of all, a user wants to see the current information, which makes it easier for him to change them 😉 That is why we’re selecting all information belonging to the current comic ID. Afterwards we’re printing that information either without text field (ID, unchangeable), inside a text field (text information like the comics title) or inside a dropdown menu (comic publisher, but with a pre-selection for the current publisher).
Additionally the current comics ID is held within a hidden field.
Study the code below which does exactly that:
<?php $function = $_GET["function"]; $comic_id = $_GET["id"]; if ($function == "edit") { echo "<form action='index.php?section=comic&function=edited' method='POST'>"; echo "<table>"; $stmt = mysql_query("select ID, Comic_Name, Publisher_ID, Publisher_Name from COMIC, PUBLISHER where COMIC.Publisher_ID = PUBLISHER.ID and COMIC.ID = $comid_id"); while ($row = mysql_fetch_row($stmt)) { echo "<tr>"; echo " <td>ID</td>"; echo " <td>".$row[0]."</td>"; // not changeable echo "</tr>"; echo "<tr>"; echo " <td>Title</td>"; echo " <td><input type='text' name='edited_comic_title' value='".$row[1]."'/></td>"; // changeable echo "</tr>"; echo "<tr>"; echo " <td>Publisher:</td>"; echo " <td><select name='edited_publisher_id' type='text' value=''/> <option value='$row[2]'>$row[3]</option>"; $sql = "select ID, Publisher_Name from PUBLISHER where ID not like $row[2] order by ID asc"; $stmt_inner = mysql_query($sql); $i = 0; while ($row_inner = mysql_fetch_row($stmt_inner)) { $j = 0; $ID_Publisher[$i] = $row[$j]; $j++; $Title_Publisher[$i] = $row[$j]; echo " <option value='$ID_Publisher[$i]'>$Title_Publisher[$i]</option>"; $i++; } echo " <td>"; echo "</tr>"; } echo "</table>"; echo "<input name='comic_id' value='$comic_id' type='hidden'/>"; echo "<input name='Save' value='Save' type='submit'/>"; echo "</form>"; } if ($function == "edited") { $edited_comic_title = $_POST["edited_comic_title"]; $edited_publisher_id = $_POST["edited_publisher_id"]; $comic_id = $_POST["comic_id"]; $sql = "update COMIC set Comic_Name = '$edited_comic_title', Publisher_ID = $edited_publisher_id where ID = $comic_id"; mysql_query($sql); header('Location: index.php?section=comic'); } ?> |
You notice that there is also a comparison for variable “function” against the string “edited”. The variable function carries that string when the form that held all previous input fields was submitted. All POST parameters are grabbed and an SQL update statement is being sent to the database. The user is then sent back to where he came from.
Fortunately you can use the same code as above for new comics to be inserted. Just remember that there are no pre-selections and no current values of any kind. Especially you will not be able to print a current ID for the comic, since there is none yet. It will be generated as soon as you formulate your insert statement sent to the database:
<?php $function = $_GET["function"]; $comic_id = $_GET["id"]; if ($function == "new") { // see above ... } if ($function == "new_done") { $new_comic_title = $_POST["new_comic_title"]; $new_publisher_id = $_POST["new_publisher_id"]; $comic_id = $_POST["comic_id"]; $sql = "insert into COMIC values (null, '$new_comic_title', $new_publisher_id)"; mysql_query($sql); header('Location: index.php?section=comic'); } ?> |
Alright. This concludes everything a database application needs to do: reading, deleting, updating and inserting data to the database using HTML and PHP to process both input and output of form and visual elements your browser understands. It really is that simple, although your themes and plugins may enrich the data in question in various ways.
WordPress is a giant database application. Written in PHP, it is able to connect and communicate to the most famous enduser database system called MySQL. It is able to process data obtained from a database to show each website visitor a clean HTML web site that his browser is able to interpret. WordPress knows two types of users: front end users and back end users. Each have different roles and privileges, yet the mechanisms of handling form inputs, processing data and delivering a HTML based response are always the same.
We hope you were able to widen your understanding of how your favorite blogging software works. Maybe you are even encouraged to repair some of theme deficiencies you may encounter yourself. If you need additional help with your installation, feel free to contact us nevertheless.
Alright, you made it. Feel free to get back to each lesson in case you get stuck. You can contact us at any time if you have further questions. Good luck! 🙂
This lesson takes you by the hand and shows which client and server side components you need and what ways exist in order to successfully build a database supported web application. We will also point out what it is that WordPress already addresses and how the contents of this lesson can help you sort out problems with your Blog.
First of all, let’s take a look at the overall architecture we’re dealing with while developing:
Our client provides us with a web browser that can interpret HTML and, if needed, JavaScript scripts. All that is done at the client side with no server interaction after initially receiving the files in question.
Then, still on our client, we either have an editor to create our files locally, or a terminal application which lets us develop code remotely. I will cover this in a second.
We already mentioned the files that can or often need to be created locally, e.g. HTML markup, PHP code, JavaScript code or images (JPG, PNG, etc.). All the files we’re creating locally (on the client side) need to be transferred to the server, where it can be deployed to other people’s web browsers.
That transfer from our developer client to the server is done using file transfer client tools such as WinSCP (Windows) or Cyberduck (OSX). They support different protocols such as FTP or SSH, depending on your preferred way of communication and the abilities of your server.
Now let’s take a look at how your development can take place.
There are various ways to develop. One way is in favor of the client. You can use a local editor application at your desktop in order to create all kinds of code, e.g. Textpad. You then need to transfer that code to the server using your file transfer client, e.g. WinSCP. That application then contacts the file service on the server you want to send files to, possibly running an ProFTPd (the counterpart of your file transfer process, which is not interesting for you unless you need to setup your own file server).
That file server then puts all of the files received to the hardware of the server, where it can be accessed by the webserver, for example — which is want we want, isn’t it 🙂
Another method of developing is in favor of the server. You can use a client-side application like Putty (Windows) or Terminal (OSX) to connect to your server using SSH. Once connected, you can use server-side editing tools like VI. I will cover VI handling in another article.
The advantage here is that you do not have to transfer any code to the server, since you’re writing files directly to the servers hard drive.
The disadvantage is that you have to maintain a stable internet connection all the time, which can be difficult in crowded WLAN environments.
Now let’s see what happens if you or another user tries to access files you created. The browser sends a request against a specific file, which is also the case if the address being accessed is just “www.domain.com”, since the webserver, receiving that request then searches for a file called index.php or index.html. Once that file is found, what happens next depends on the kind of file being accessed.
If the file in question is pure HTML or basic JavaScript, the server will just send the markup back to the browser where it can be interpreted.
If the file is of PHP or any other server side script language, the webserver needs interpreter modules installed which enables it to further process that script. Every script processing results in yet another markup output (HTML, for example) which can be interpreted by the client’s browser after transfer. The way in which that markup was created, however, is not visible by the outside world.
Having a PHP or other server side script, a database can also play a role when it comes to accessing structured data, like processing login information. The webserver then needs further components to interpret DBS connections. If the script in question is PHP and the database system is MySQL, the PHP script needs both correct database connection parameters in place and a well defined SQL statement. Both of that can be thrown against the MySQL server instance which then deals with the query and sends the result set back to the webserver. The webserver then does the same as it always does, creating markup and sending it back to the client’s browser.
That would be a full roundtrip, and it is important to understand that interaction in order to successfully build a standalone web application — which is what we’re aiming at.
All of the components above are still present in a certain way with a WordPress installation. Yet there are important differences:
The following scheme shows the architecture differences of WordPress in relation to a standalone website.
Please remember: You need to understand the basic principles of what is happening within a CMS, or at least within a WordPress theme, in order to be able to repair broken files and help yourself with your blog project. That is why the following chapters walk you through everything you minimally need to know about the interaction between HTML, PHP and databases.
In our SEO blog we often talked about so called “onpage” criteria – things you need to take care of on your website. Within that scope, technical requirements are often addressed by a Content Management System like WordPress. However, while talking about web auditing, we also noted that there are times when you need to take things into your own hands. Code responsibility is always yours, no matter which technology you choose to use.
In short, you need to be able to fix things when they went out of order. This tutorial will give you a definite how to in order for you to understand, construct, develop and/or fix your website by teaching you how to build a standalone database supported web application using PHP and MySQL. This is meant as a complete tutorial and will take you by the hand step by step through all you need for a minimal PHP and MySQL based web application.
We will go into infrastructure basics as well as database concept foundations and step-by-step HTML notation and PHP programming exercises. However, please read this first page carefully before proceeding any further.
This is your starting point. Feel free to get back to this post every time you like.
Let’s get started right away. In order for you to grasp everything you need to know about PHP and database development, we recommend going through this tutorial step by step. The following lessons are designed to be worked through in chronological order.
If you have doubts wether you need to understand all that, feel free to read ahead.
But worry aber PHP or MySQL at all? Well, ever since the concept “web 2.0” came up, the user was meant to participate in the content delivery of a modern web page. For example, a user can take part in content creation by:
All of the above require data handling capabilities of the web site in question. A web site is no longer a static item delivering simple hard coded structured data via HTML. Web 2.0 web pages require dynamic data display. To achieve that, communication between the web server and a database server which delivers the ever changing data is required.
Between the ideas of delivering structured display data via HTML and managing data coming from a database system such as MySQL, PHP is used to introduce various algorithms such as loops and data sorting functions. Using databases like MySQL to hold data and HTML as a way to formulate visual markup, PHP is the binding element for both sides to understand each other.
A HTML form may present a way to input guest book data such as your name and your entry text. PHP then reads that data and passes it to the database. The database system then inserts the data received from PHP to the pre-defined database tables. Another web page can then use PHP to read the content of a specific database table, or even different tables combined, and present that data, e.g. the guest book content, including the newly created entry. PHP then not only handles the data readout, but it also generates the HTML output you desire.
Now that must all sound pretty horrible. Actually it’s not. All the concepts above will be explained in more detail using this tutorial.
This guide is scructured in a way that it can serve as a reference sheet regarding certain source code or concept ideas even when you already know how to code. Still, this guide does not require you to have any skills to start using it. Every blogger will have the benefit in understanding all that is tought here. In fact the material in front of you was used for basic first semester University programming and database classes — with great success and feedback.
Understanding how modern web technologies like PHP and MySQL work together is essential to grasp the basics on how a Content Management System like WordPress functions – and how to fix themes or plugins when things are broken.
Whenever you need an overview, feel free to get back to this post. Have fun! 🙂
We have often talked in our SEO blog about the various levels on which a sustainable SEO methodology applies in order to present high-quality websites to our own audience (and thus also Google). In addition to legal requirements, a clean content structure, speed, security and backlinks, one area is very often neglected: the clean technical structure of your own website.
Every website has to deliver HTML code to the visitor’s computer so that it can be displayed by a browser. This HTML code is subject to conventions, the web standard defined and continuously developed by the World Wide Web Consortium (W3C).
If a website deviates from these conventions, it is up to the browser to recognize and correct these errors. Every browser is developed differently here. Google’s Chrome does an excellent job of optimizing even gross violations of the HTML code supplied before the website is displayed in the browser. Firefox and Safari are similarly strong here, Microsoft’s browsers are a bit behind here.
As an SEO, you may be wondering why all of this should be relevant to you. After all, you don’t write your website as static HTML, but use a content management system like WordPress to have your HTML code delivered to you. We will now go into this further.
Anyone who uses a content management system (CMS) like WordPress to provide their website is often led to believe that the technology is 100% covered. After all, it is the job of a CMS to separate technology and content so that you only have to take care of the content.
Unfortunately this is not correct. This is due to the fact that the CMS provides a website on the themes provided by third parties. The content created by the operator is put into the mold of these themes, enriched and optimized using various plugins, and in this way returned to the visitor’s browser via various, multi-layer PHP control structures and database access as the end result “website” in the form of the final HTML.
The CMS itself may work cleanly here, and your own content may also be of high quality. But SEOs around the world trust the technical integrity of the themes and plugins they use too much. But it is not for nothing that there are not only updates for the CMS, but also regular updates for the themes and plugins used.
Keep your CMS as well as your themes and plugins up to date. Use child themes to adjust the theme. Before every update, create a backup of web space and all database content.
But even if the CMS, themes and plugins are up to date, they do not necessarily have to work together optimally. The following problems result from the nature of the matter:
All of this ensures that every WordPress project can show severe deficits in the technical structure at a certain point in time. This leads to the need for repeated audits of every website project.
Check your website regularly with a web auditor, as changes to the technical structure can occur with every update on your website.
An audit is a tool from quality management. Each audit checks existing technology and / or processes against previously defined guidelines and requirements.
In a web audit, the requirements are not defined by SEO or Google, but by the World Wide Web Consortium (W3C). The fulfillment of these guidelines is checked by Google as a quality feature of the website provided by SEO and is included in the ranking. Technical cleanliness is therefore a direct criterion for better placement of a website on Google.
A web audit examines the following general factors in particular:
Furthermore, SEO-relevant content can be checked:
Requirements for mobile optimization and ergonomics can also be checked, which can also have an impact on SEO optimization, including:
Furthermore, there are security-related requirements that should also be met in the modern web, including, for example:
Finally, Whois data from your own website and the data from the W3C validator can be transferred directly to the audit.
SERPBOT addresses the examination of all these requirements in the SERPBOT Web Auditor, which you can use free of charge as a registered user. Additional tests with added value, which are associated with costs on our side, are available to all PRO users.
Every modern website is delivered using a CMS. This is where the CMS and the themes and plugins used work together. Each of these components has different versions at different points in time, which work together differently with one another.
This is increased by new PHP and MySQL versions, which provide new functions and do away with old ones, so that there is a real competition for every CMS, theme and plugin manufacturer to keep the website functional. This not only creates technical challenges, but also human errors that have to be compensated for in new versions.
This highly complex interplay of technical changes and dynamically generated websites leads to a direct necessity: the regular audit of your own website – a web audit. With the Web Auditor, SERPBOT therefore offers a strong ally for your web projects.
SERPBOT serves as a tool for all those who want to earn money on the Internet with their websites. You do marketing in this, that or interwoven way on the Internet and are therefore mostly self-employed. At this point we want to give you an overview of the various options for online marketing. At a suitable point, reference is made to suitable sub-categories and / or suitable articles.
In order to approach the question of what online marketing actually is, we first have to clarify the basic term “marketing”. Science defines marketing as follows:
[Marketing means] all activities of a company to promote sales through customer care, advertising, observation and control of the market as well as through appropriate control of its own production [Translated using Google Translate].
This definition is very broad, but that also applies to marketing as a whole. It is about making the products known, the characteristics of which are geared towards specific customer needs, and thus demand. There are various forms of marketing that will not be discussed further here. What is important for us here is how online marketing as a special form of marketing is designed.
The world of online marketing is also very extensive in itself. Primary forms of online marketing include:
In the vast majority of cases, a single form of online marketing is not operated, but many tools from several areas are brought together in an overall mix. It is therefore important to clarify which online marketing tools are available and which goals they each serve.
Basically, all marketing activities on the Internet should be aimed at the following points:
To address these goals, various tools are used that directly serve those goals. These are then assigned to the sub-areas of online marketing and then discussed in more detail. Similarities and differences to one another are also explained.
Note: A basic technical tool for modern online marketing is undoubtedly the WordPress content management system. This can be assigned to areas equally. Tools are mentioned below that require integration in WordPress as a CMS (e.g. plugins).
As a “free” method, SEO ensures that your own website is ranked higher by search engines for certain keywords and thus found by search engine users. Your own website is optimized according to various factors and made high-quality and tasty for the search engine / user. In addition to first-class, well-researched content, a clean technical basis, a short loading time for the website and the linking of other websites are particularly important.
Over time, every search engine will classify your site as more valuable than other, similar sites on the net. SEO is therefore a cost-neutral, medium to long-term traffic tool, which, however, always pursues cold acquisition. You can find out more in the blog category “SEO”.
SEO tools are:
As a paid method, SEM ensures that your own website is displayed as advertising on search engines for certain keywords. You then act as an advertiser and enter self-defined advertisements in the search engine provider’s own administration interface. The payment is based on the value of a click, which results from the demand for this keyword, i.e. the competition on the market. This is where the term “cost per click” (CPC) comes from.
SEM is thus a short-term, scalable traffic tool that requires less time, but financial expenditure. In addition, like SEO, it always does cold acquisition.
SEM tools are:
Email marketing means:
E-mail marketing can trigger very high traffic and also high sales at the push of a button by sending e-mails to a large group of people manually or automatically. If the recipient of such an e-mail clicks on a link that appears to be valuable to him, he becomes a potential prospect and thus a potential buyer of the product on offer.
While collecting e-mail addresses can take a lot of time, the user base is usually relatively stable afterwards and the conversion rates are very high later, as a lot of trust can be built up via the upstream e-mails. This trust is a prerequisite for successfully selling products online.
The special thing about e-mail marketing is that it is always offered to a “warm” group of interested parties. This is different with SEO and SEM, which always do cold acquisition and thus have far lower conversion rates than email marketing.
Email marketing tools are:
SMM can run at no cost or subject to payment.
In a cost-neutral sense, SMM means building followers for profiles, pages, groups or other presences in social networks such as Facebook, Instagram, Pinterest, XING, LinkedIn and co. Regular postings about your own articles and / or products can lead to successful conversions, especially if the followers have known you for a while and have built up trust. You then have the same advantage as email marketing and do warm acquisition. The financial outlay is very low, but it takes time, as does SEO.
In the paid sense, SMM means acting as an advertiser, analogous to SEM. However, you then do not place your advertisements in search engines, but offer them to self-defined groups of people on the respective social network. This can lead to a large number of people being reached per day even without your own followers. However, it is then cold acquisition, just like with SEO and SEM. It can also mean high financial costs, as with the SEM.
SMM tools are:
In your existing online marketing channels such as SEO-optimized websites, SEM landing pages, emails in your email marketing campaigns or in posts / ads in your social profiles, you will sooner or later recommend products that you will find in the In the past. The respective providers often offer you a so-called partner program for these products.
If you are registered and approved for this partner program, you can receive a commission for sales that are based on your product recommendation. You are then an affiliate (or partner) of the respective product provider. We call this affiliate marketing, which only really makes sense in combination with other techniques.
Affiliate marketing tools are:
Probably the oldest form of online marketing that worked in the 90s is the exchange of advertising banners on your websites. You can of course still act like this today. As a rule, however, a banner exchange is more lucrative for the landing page on which your banner should appear if you offer an affiliate program.
Then the link that you receive via nofollow is invalidated, but more people will be willing to place your banners on their website – and do so without being asked if they like your product. SERPBOT, for example, receives 80% of all new customers through banners from voluntary partner sites.
However, you can also display advertisements from other people directly on your site without knowing them personally. For example, Google AdSense, as a counterpart to Google AdWords, allows you to place advertising banners on your site. You will then receive remuneration for every click that one of your visitors makes on such a banner. The advantage here is the easy access to suitable banners. The disadvantage is that you have less control over which banners are shown.
The field of online marketing, whether as a small part or a main part of the marketing of a company, has many sub-forms. So you can primarily optimize your own website using SEO measures and save money, or attract a large number of visitors to your site at short notice using SEM measures. Or maybe you’re the social media type and prefer SMM. E-mail and affiliate marketing can be wonderfully combined with other areas.
You can get very creative here and, for example, collect e-mail addresses via social media, and advertise your website in the e-mails that are then automatically sent – and also optimize it for the search engine SEO. There are hardly any limits to your imagination, and the successes of many bloggers speak for themselves – also in a financial sense.
But in order to be really successful with a blog, you should learn to understand your website in its entirety. To understand the technical requirements, also when using WordPress, we have created a PHP MySQL tutorial, which introduces you step by step to the creation of a web-based database application, so that you can better understand WordPress and in the future problems when dealing with themes and Solve plugins yourself.
SERPBOT wishes you a lot of fun and success in your online self-employment and is at your side as a tool at any time with advice and action.
* -Products are affiliate links where SERPBOT receives a commission without increasing the price for you as a buyer.
The speed of websites is of increasing importance for the rankings assigned to a website by Google. In order to sustainably increase the placement of your own website and thus increase its visibility, performance optimization is of increasing importance. Why is that and what can you do specifically?
Every user wants to be able to view the websites they have selected in the shortest possible time. Google addresses this acceptance criterion with higher rankings for websites that have low page loading times.
A BBC study showed that with every second of additional waiting time, 10% more users leave the site prematurely. This is already a fundamental issue in the desktop area.
However, at the latest with the widespread use of mobile devices, which only have a small bandwidth, the difference between fast and slow loading websites becomes very clear.
So what can a website operator or even SEO do to make their website load faster without losing functionality? We will approach this question in more detail with the focus on WordPress pages in this article.
First of all, the often-cited term of performance. What does it mean exactly? Strictly speaking, it’s synonymous with performance. In physics, performance is the work done in a specific time.
Performance = work / time
What does that tell us?
In order to increase the performance of a website, you could do three things:
In fact, we as SEO take care of both reducing the work to be done and increasing the throughput of work done.
But how exactly can this be done? To do this, it makes sense to take a look at the individual components of a website in general and WordPress in particular.
A modern website comprises the following levels:
We can distinguish the level of the plugins into:
The latter can offer added performance. We will talk more about this later. But first we should look at what performance plugins can do and why this is an improvement. However, it also automatically becomes clear where the limits of performance plugins are. This makes it easier for you as an SEO to understand what is necessary for the sustainable speed improvement of your website.
Analogous to the architecture levels above, we can include the following levels to increase performance:
The higher level always influences all of the lower levels. This automatically means that performance plugins can only take effect at the CMS level and cannot speed up operations above the CMS. For example, a plug-in cannot increase server resources or compensate for misconfigured server or PHP settings, since each plug-in depends on them in order to function.
Plugins are directly dependent on the correct basic configuration of the overall system. Then plugins can optimize what is delivered to the user as a website. It is therefore worth optimizing at all the aforementioned levels in order to effectively reduce the loading time of your own page. Plugins alone are not enough.
We will now go into detail on the individual optimization levels.
First of all, the name of the first optimization level already provides the reason why websites, especially complex CMS such as WordPress, should not be rented on externally hosted servers such as wordpress.com.
Even if you come to a result here quickly and do not have to do much configuration work, this is precisely where the disadvantage lies: you then have no influence on the configuration.
If you don’t want to put a server in your office or rent a root server that has to be looked after, a middle ground is recommended. Renting a well-equipped managed server doesn’t have to be expensive. The company Hetzner supplies very cheap and high-performance server tariffs. Various adjustments to the server and PHP configuration can also be made afterwards.
Concrete recommendation
A server with at least the following hardware characteristics is recommended:
- CPU e.g. Intel® Xeon® E5-1650 v2 Hexa-Core
- RAM at least 64 GB DDR3 ECC
- Hard drive for example 2 x 500 GB SSD
- Network: 1 GBit / s port connection with guaranteed bandwidth
At the web server level, a number of equipment features and extensions are recommended, which can reduce and accelerate the delivery of the data sent from the web server to the client’s browser.
Concrete recommendation
A web server with the following software is recommended:
- Apache with the option for the following extensions: mod_http2, mod_deflate, mod_brotli and mod_pagespeed
- PHP5 and PHP7
- MySQL with managed backup functionality or, optionally, use of external database systems such as Relational Database Services (RDS) from Amazon Web Services (AWS)
- SSH access
- Integrated backup functionality for backing up the web space
Closely interwoven with the web server level is the extension of the hypertext precompiler used on the server, or PHP for short, which is responsible for the dynamic generation of HTML output based on computing and database operations.
The characteristics of the PHP level can be configured via php.ini, for example. The PHP scripts running on the server can also change some settings.
It is advisable to activate the following PHP extensions in order to provide basic functionalities that can accelerate the execution of the PHP scripts or reduce the amount of data generated by them.
Concrete recommendation
We recommend activating the following extensions:
- APCu
- OPcache
Further adjustments on the server and PHP side are useful, which affect the level of the content delivered via the server. However, this will only be discussed further below.
At the level of the database system, the data that is later read by the CMS (and possibly written by the visitor to the CMS frontend) must be made accessible in a high-performance manner.
Concrete recommendation
It is advisable to use options to increase the throughput of database operations, for example by maintaining a read replica. This can, for example, be booked as an option in upscale infrastructures such as the Relational Database Services (RDS) of Amazon Web Services (AWS).
In addition, self-created scripts must be developed in such a way that unnecessary access to the database is avoided. The transfer of PHP-intensive evaluations into the database system can in turn mean a performance advantage, since the amount of data that has to be read from the database and then processed is reduced.
A content management system like WordPress is essentially used to provide the function for separating the layout and content of a website or blog.
No matter what content (text, images, videos, etc.) your blog has, it can always be displayed in completely different ways by selecting or developing a different theme (new color scheme, new position of menus, widgets, sidebars, header, footer, favicon and much more).
This separation of layout and content is a very important basic requirement in the fight against loss of performance. So you can optimize the theme without endangering your content.
What can still happen, however, is that you negatively influence the display of your content by incorrectly adjusting your theme.
Even if we are going to talk about plugins and their powerful possibilities for performance optimization right away, it should already be said at this point that careless handling of the settings of performance plugins generally has disadvantages in terms of both speed and presentation of the theme can.
For this reason we prefer to describe in the following “on foot” which specific actions can have advantages in the rapid delivery of a website and why. The following video can serve as an additional source of motivation and information about why such adjustments are important and how you can make them.
In the course of optimizing for performance at the CMS level, the question always arises: what can I leave out? In order to answer this question it is of course important to clarify: what has been charged so far? Here you can use the following tools:
Once the current performance status of your website has been recorded, you can start accelerating the theme and content of your WordPress site.
Manual measures to adapt your theme from here on are in particular the following:
Many of the functions mentioned above are greatly simplified by various plugins, which are described in more detail below.
But first a word about plugins in general. The rule is: the less, the better. If a plugin is not required, deactivate it. (For security reasons, you should even delete it.)
Some of the data of the plugins that are left over are usually just as optimized as the theme you are using. But at this point we do not want to recommend that you make changes to your plugins.
Rather, you should leave this task to another plugin that is specially designed to optimize performance. It is important to choose wise settings and to test after each step whether your site still behaves visually and functionally as you expect.
Concrete recommendation
We recommend using one of the following performance plugins:
- WP Fastest Cache
- W3 Total Cache
- Pagespeed Ninja
- and others
Please keep in mind that the manipulation of scripts (e.g. delayed loading, but also the miniaturization of the source code) can lead to certain functions of your site no longer behaving as intended.
You should therefore not only check for visual changes, but also test all functions again after each new setting (for example, carrying out an order process in your shop system). Remember to reset the page cache and your own browser cache before every test, otherwise you will check an outdated status.
A comprehensive performance optimization of WordPress-based websites should be done on several levels due to the complexity of the underlying technologies. From the infrastructural to the web server and database level to the level of theme and content optimization, there are various options. On the one hand, it is important to reduce the work to be performed by the system and, on the other hand, to increase the ability of the system to perform the remaining work.
Only a part of these tasks can be accomplished by performance plugins. The respective plugins are ultimately dependent on the possibilities, restrictions and existing settings of the underlying system. In order not to put too much energy into the preparation of the theme and content, it is recommended to use them. Here, however, a comparison should always be made between before and after optimization in order to understand the effectiveness of the changes.
Under no circumstances should a function test of the website be missing after optimization. Both the visual elements of a website and its functions themselves are prone to errors due to inconsistent optimizations. We wish you every success with your optimization project and are available to answer your questions immediately.
Updates to the Google algorithm can potentially cause major changes to SEO-optimized blogs and websites. Whether that’s good or bad for you as SEO depends entirely on the condition of your website. But let’s first clarify what this is all about.
Google publishes so-called “core updates” at regular intervals. These are refinements of the algorithm that determines the ranking of the web for certain search terms. These refinements are based on the constant quality control of the search results, which Google constantly carries out itself. They also address the constantly changing requirements of the modern web – for example the increasing importance of optimizing websites for mobile devices or changing data protection requirements.
Possible Google updates are:
In addition to these core updates, which affect websites of all genres and subject areas, there are also subject-related updates that focus on websites of very specific industries and / or topics. Regardless of which type of website these updates affect: sooner or later you will feel the effects of a Google update.
The aforementioned types of Google updates can be found in Google’s update history:
We never know exactly what the content of the respective updates is. This list is by no means complete. However, it does give an idea of how Google works. The following video can give you an idea of what Google was aiming for with the latest update from 2020.
In order to answer the question of whether you should be a friend or an enemy of Google Updates, the question of perspective arises first.
From the perspective of a user, i.e. someone who enters search terms into a search engine and expects matching results, Google updates are usually good. After all, this is exactly the goal of fine-tuning the algorithm that Google wants to achieve.
From the point of view of an SEO, a Google update can in turn be both beneficial and disadvantageous. So ask yourself: which methods do you use as SEO to bring your website ahead to Google?
The question is: how much manipulator are you as SEO?
If in the past you paid a lot of attention to the (self-inflicted) increase in your backlinks, bought links and / or only paid as much attention to your content as was absolutely necessary, you will hardly benefit from a Google update. Exactly such sites would like to recognize these algorithm optimizations and give them less traffic in the future than other, more user-centered sites.
If, on the other hand, you as SEO have put your content in the foreground, observed legal requirements, optimized your blog or website for different devices and let the backlink building happen organically, you can only benefit from all Google updates sooner or later.
In order not to have to be afraid of future Google updates, but on the contrary to be able to look forward to them, you can ask yourself as honestly as possible: Who are you focusing on – your traffic goals or your visitors?
Remember: Google has no interest in getting you as much or as little traffic as possible. Google simply wants to ensure that the user is suggested exactly the websites that match his search query. So it is always just a question of which visitor can you serve the most, and how exactly can you ensure this benefit?
A suitable visitor for you should be at the center of your SEO efforts. Then every Google update is your best friend.
Google therefore implicitly rewards a solid SEO methodology and the creation of high quality websites.
What we as SEOs know as Google Update are natural iterations as a search engine matures. They are the technical equivalent of what nature holds as natural mutations in order to adapt to the environment in the best possible way.
If possible, never ask yourself how you can best take advantage of the current changes in the algorithm. Instead, ask yourself what you as a user on and from your own website would most likely want, and how much you already meet these requirements. If you don’t: Optimize your website accordingly. The next Google update will thank you.