Introduction
Interested in creating your own website? Ever wondered how cool is it to have a website that has a log-in/log-out functionality? Want to learn how to Create, Read, Update or Delete(CRUD) records in a database? Have you lost track on your previous tutorials? Well, I’m going to teach you how to create one from scratch where in you will know every single details on how the code works. If you are new to back-end web development, this tutorial is for you. I’ll explain everything in detail so that you won’t have to research some particular methods being used. We won’t be using any frameworks to keep things simple. Also I won’t be focusing on the websites design since were after the functionalities though, it’s easy to implement the design. What will be doing is a simple item list when the users is logged in.

Topic Contents:
1.) Setting up your server
Now that your all set and go, as the basics of programming goes, let’s start by creating a simple shoutout of “hello world” in our server.

First of, go to the directory where you installed your XAMPP (Commonly in C:\xampp). From there go to the htdocs folder (Commonly in C:\xampp\htdocs) and create a folder named “MyFirstWebsite“.

1 - PHP101

From that part, you have now created a Local URL for your website. That folder will be used to supply in all website files (.html, .php, .css, .js, etc.). Open up your text editor and let’s get started!

I use sublime text as my text editor. If your using Notepad++ or any others, it’s ok. It’s not really a big factor but it’s just a preference on which one would you like to use.

What we will do is a basic HTML page and display “hello world” from the server using a basic PHP syntax. We then type the following syntax:

Hello World

Hide Copy Code

My first PHP Website

<?php
echo "

Hello World!

";
?>

Save the file to the “MyFirstWebSite” Folder and name it as “index.php“. (Directory as seen on the top part of the image)

Now that you have the file. Let’s now open your XAMPP control panel. In case it doesn’t appear on your desktop, it is located in your XAMPP folder as seen on the image:

Untitled

Untitled

Now that it’s there, Run your Apache and mySQL by clicking the “Start” button on the actions column. You should see a random PID(s) and the default port number. Apache is the name of our web server wherein it will handle all the files as well as serve as the communication to the web browser and MySQL is our database which will store all of our information.

Open up your web browser and in the address bar, type localhost. You should see the menu of your XAMPP.

If it’s the first time you run it, it will ask what language would you prefer, just simply pick and it will lead you to the menu. If you will noticed the directory is localhost/xampp, it’s where the default page leads you even if you type in localhost.

Untitled

If that appears, then it means that your XAMPP server is now running. Now let’s try running the website you just placed. Try typing localhost/MyFirstWebsite. It should be the same as the picture below.

Untitled

If you will notice that the URL is MyFirstWebsite, it is derived from the htdocs folder and it automatically reads files that are named “index”(Be it index.html, index.aspx, etc), which serve as the default page. Typing localhost/MyfirstWebsite/index.php is just the same. You can also create your custom name for the URL by simply renaming the folder but let’s just stick to MyFirstWebsite.

Note: If you don’t have a file named index and you entered the URL, you will receive an error 404 for not having the file on the server. If you do have different files that are not named index., you have to specify the specific file name. E.x: localhost/MyfirstWebsite/page.php

2.) Creating the public HTML Pages
Next, let’s re-modify our website and add a registration link where our users can register as well as a Log-in page right after getting registered. Let’s modify our home page with the following code:

index.php

Untitled

Hide Copy Code

My first PHP Website

<?php
echo "

Hello World!

";
?>
Click here to login
Click here to register

As you can see, we only added 2 links which are for the Login and register. Let’s create the registration page first:

register.php

Untitled

Hide Copy Code

My first PHP Website

Registration Page

Click here to go back

Enter Username:
Enter password:

As you can see, it’s just a basic form where the user can input his/her credentials. Now for the login page:

Hint: Just copy-paste the same code to make things faster.

login.php

Untitled

Hide Copy Code

My first PHP Website

Login Page

Click here to go back

Enter Username:
Enter password:

Basically it’s just the same code as from the register.php but the changes made were the ones underlined.

Click here for the complete login.php code

Try running localhost/MyFirstWebsite again and your pages should look like this:

index.php

Untitled

login.php

Untitled

register.php

Untitled

3.) Creating the database and it’s tables
Now that we have our basic page for the public. Let’s proceed to the database. First, type localhost/phpmyadmin. This will lead you to the phpmyadmin homepage:

localhost/phpmyadmin

Untitled

From there, go to the Databases tab located on top then from the text box in the middle, type first_db then click on create. Just leave the Collation as is.

Untitled

You have just successfully created your first database. Now from there, let’s create a table wherein we can register our users and display information. First, click on first_db located on the left side and create a table named users with 3 columns then click on Go.

Untitled

For the table’s structure, make sure to have the following fields then click on save:

Format: Column Name – Type – Length – Null Property – Other Properties
id – INT – N/A – Not Null – Auto Increment
username – varchar – 50 – Not null
password – varchar – 50 – Not null
Leave everything by default if not specified.

Untitled

Note: You need to scroll right for the auto_increment. I just edited the picture to fit the A_I field

Next, create another table named list with 7 columns and for the table’s structure:

id – INT – N/A – Not Null – Auto Increment
details – text – Not null
date_posted – varchar – 30 – Not null
time_posted – Time – Not null
date_edited – varchar – 30 – Not null
time_edited – Time – Not null
public -varchar – 5 – Not null
Untitled

4.)Adding users to the database
Now that we have our tables. Let’s move on to the fun part, getting your registration page into action. From your registration.php, add the following below the html codes:

register.php

https://simpliv.wordpress.com/2019/07/17/step-by-step-php-language-for-beginners-with-examples/

Author's Bio: 

Simpliv LLC, is a platform for learning and teaching online courses. We offer a rich variety of educational courses that have been prepared by authors, educators, coaches, and business leaders. Whether you're interested in healthy living, nutrition, natural healing, computer programming, or learning a new language, you'll find it here.