Post-it Website [01: Setting up template and Database ]

type_tutorial-3

In this tutorial I will show you how to make a basic post-it website where people are able to leave a message. We will make this using html, css, php and mysql.

This tutorial requires a basic knowledge of html and css. A working version of xampp ( or mamp or wamp ) is also required.

First make sure your xampp is running and apache and MySQL are started.
Apache has to be running to simulate our .php files and MySQL is for our database

30_xampp_running

Ok so in this part we’re gonna set up our page and the database. I’ll be using xampp to run our website locally. ( I might do a tutorial on how to get xampp up and running ).

 A. Making the folder and the index file

In xampp, we add our new project folder to the htdocs folder. this way we can access it in our browser. We’ll add the folder postit.

Next we’ll add a index.php file to the folder, this page will show up when we browse to http://localhost/postit. You won’t see any content for now.. That’s because the file is empty, Next we’ll create the basic template.

B. Creating the basic template ( index.php file )

We’ll start off by adding the html, head and body tags ( in html5 )

The meta-tag in the head section is the text-formatting, it’s a standard line we include it so that any special characters are shown. The other elements should be straight forward?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>

<body>
Welcome to my Post-it Page
</body>
</html>

If you would now browse to http://localhost/postit you should see the welcome page!

C. Structure of the database

This might be the hardest part if you’re not familiar with databases or mysql.
We have to create a database, which will have a table with our info in, divided in fields.

I’ll illustratie briefly what a database with tables and fields is.

01_database_example

So the Database School, can contain tables like ( students, teachers, staff ). And every table has it own fields, like ( age, name, living place ).

Our Post-it page only needs a simple database.

02_database-2

D. Setting up the Database in MySql

Xampp comes with a built-in MySQL manager called phpmyadmin. In phpmyadmin you can create the databases and the tables.

Go to your phpmyadmin by browsing to http://localhost/phpmyadmin.

Next we’re going to create a new database, Go to the databases tab.

03_databases

Enter the name for our database “postit” and select UTF-8 General
( this is the text-encoding type ). It’s the same as we specified in the head of our template index file. Don’t worry to much about it.

04_new_database-2

Select your new database in the list. Next we have to create the table that will hold our fields.
Our table will be called “posts” and will hold 2 fields ( id & text )

05_new_table

Once our table is made, we need to define the fields and the attributed for our fields.
We need 2 fields, an id and a text field.

ID field

  • Type =  INT
    the integer file type stands for a whole number ( 1,2,3 .. )
  • Length / Values = 3
    a length value of 3, meaning 3 digits can be entered, so there will be 999 slots reserved for posts, you could make this 4, so that 9999 slots are reserved, doesn’t really matter
  • Auto-increment (A_I) = Check
    ( this means it will automaticly add 1 number to it for every new post, it’s a sort of numbering system. )
  • Index = Primary
    ( this means it’s the primary identifier of our table, since the id will be a unique number we can identify the posts through this number )

Text field

  • Type = TEXT

06_fields

Once you have the above settings press save.

This concludes the first part of this tutorial, The database is ready to receive data and our basic page is setup. In the next part we will connect with our database and see if we can read some info from it.

Knowledge is power

One thought on “Post-it Website [01: Setting up template and Database ]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>