Simple PHP Website for Contacts

Hello everyone, this is my first instructable and i hope you like it!

I would like to point out that this project was made purely for hobby and learning php language. I started from scratch and it is not 100% complete yet. It is a Custom Website and it is not based on a platform of online publications and content management so probably there are some bugs and omissions.

I will try to describe the steps to be as accurate as possible. I will focus more on functionality and description of the code and not the step by step construction as I find it impossible for now.

For the Website construction I use some plugins that provide interactivity on the page which I mentioned with links at the bottom of the page (footer.php) and here.

Ok, lets start!

Step 1: Tools That We Need

First we need a server for hosting web application files and to be able to run a scripts in order to have a dynamic website.

The Website's construction is based on PHP language to produce dynamic HTML. As a database system I used MYSQL. For extra interactivity, jQuery (For ajax) was used (which runs on the browser to asynchronously request content from the server).

The XAMPP Controll Panel v3.2.1 (For Server and Database) which includes the following programs:

1. Apache 2.4.10
2. PHP 5.5.15
3. MySQL 5.6.20

A Code Editor that we like and supports Highlight at the code of these languages:

PHP, HTML, jQuery, CSS

A Browser with inspect element ability (For create and edit style of the page).

Step 2: Database

In above, exists one picture of the database schema who i create and use in site.

Dababase structure exists at contacts.sql file.

The database must be named 'contacts' and to allow the application to communicate with the database, we should have create a user with username and password of your choice, and these privileges:

SELECT, INSERT, UPDATE, DELETE, FILE

only for this database and only for localhost users.

Also, the file connection.php must be properly modified so that the variable $host corresponds to the real ip:port (127.0.0.1:3306) destination of the database, $username variable your username and $password your password.

Step 3: Folder Organize

I tried to organize the site into three levels - folders as described here: Model–view–controller. (A future version will be based on a complete controller like codeigniter.)

Controll (Controllers folder):

Pages, Database (Connection and Execute Query), Ajax requests, Uploads - Downloads.

Back end (models folder):

db folder: Anything that has to do with the database. user folder: Anything that has to do with the registration / login / disconnect of the user. plugins folder: For device model detection and Sql formatter - beautifier (for debuging)

Front end (views folder):

Animations folder: It includes animations that appear interactively until the response comes from the server. (ajax request) Css folder: Files that can be offer style in the page. Icons folder: Icons who used by the site. Js folder: Files who use jquery library for the interactive ability of the site.

icon: "MVC-Process" by RegisFrey - Own work. Licensed under Public Domain via Wikimedia Commons.

Step 4: Plugins

Device detect:

For this ability i used the library Mobile_Detect.php in index.php.

Ability of change page:

For this ability of the user content i used the external plugin named Pagination.

Animations:

In this step I used two animations from the perfect css animations which are used when loading.

SQL:

Sql Formatter library.

Step 5: Easy Debugging

All these below, are just to help the programmer, a final version of this web application will not display any of these debugging operations to the user! In file: debug.php there are several functions that help the programmer at debugging process.

Find the cause of failure of a query execution:

To activate the visibility of queries press the link D:1 in the bottom of the page, or D:0 to disable. Queries that have failed (red) always appear for debugging purposes. For example you can see where exactly in the page the query was performed when executed, from which php file /line number the function was called, source code of the function (Plugin) and which function arguments were used. For more readable sql i use the Sql Formatter library (Plugin). To print more detail on Query function I use the debug_backtrace() function.

Check the value of array maps or simple variables:

The dump is a function that prints a variable as a table or as a simple variable, recognizes what type it is and prints according to the use of print_r() for array or var_dump() for other types of variables. Furthermore it recognizes from which file and line of this was called and he adds a description of the developer's choice to help him remember why the message box was shown.

Query types:

Green, FETCH: SELECT

Yellow, AFFECT: UPDATE, DELETE, INSERT

Red, FAILURE: All queries which has failure executing, because MySql has returned an error.

Step 6: User Abilities

Register

Activation

Login

Logout

Step 7: Αlerts

For messages that appear to the user when eg. writing wrong password or when it disconnected from the system, the SESSION variables have been used:

$_SESSION['notice'])

$_SESSION['success'])

$_SESSION['warning'])

$_SESSION['error'])

because the messages are generated by different files.

For example, when the user is writing wrong password, then an error message is generated from the script contacts/models/user/login.php, it is saved at SESSION variable $_SESSION['warning'] and when it redirects from there to the root script (index.php) then session_alert() is ran which checks if one of the variables is set. If one of them is set alert($message,$type) is called which will generate HTML for this message. This way, the message will seem to be generated from index.php

Step 8: User Content

The user content is meant to be different for each user, but based on a specific structure that does not change, this is the green panel which has three options for displaying content:

1) View contacts

Here all contacts are displayed by name and to see a contact simply press on it and then run the mechanism ajax.

More specifically, when an asynchronous post request is made to ajax.php at the server and get the response then it slides down and shows all the elements that have been added for the contact.

2) Insert contact

This feature has not been implemented yet.

3) Search

This feature has not been implemented yet.

Step 9: Example of Ajax Request

Step 10: GitHub Repository and Testing

If you want to get a feel for the application's operation (until the stage I've implemented), you can take a lookhere.

The email service does not work on this server for user registration test, so it is impossible to receive an email with the confirmation account link.

For this reason, you can try to log into the system with a demo account:

Username: [e-mail]

pass: demo

Otherwise,

if you want to view / edit / download the application code and help me with your own ideas, just see my GitHub Repository.

Thank you who read my first Instructable! :)

Still I would like to thank Sudavar (at the Codescar team) for help and knowledge they gave me!