Steps for designing any dynamic website (for beginner).
By: Rajat Kumar | Last Updated: January 25, 2020
Background:
Hello techies today we are talking about what are the main factors that keep in mind when designing and developing any custom website or web-application.
Although when designing any custom design you should have some pre-requirements needs of programming language like: basic knowledge of front-end language that is HTML (hypertext mark-up language), CSS (cascading style sheet), JavaScript, jQuery, MySQL (for database design) and finally server-side scripting language like: PHP or .Net.
Also required some free code writing tools or IDE like: Notepad++ or Microsoft web expression (deprecated).
Although Microsoft web expression is deprecated in 2012 and not releasing any updates after deprecated in 2012 by Microsoft, but personally speaking I am using this tool till now because of the simplicity of this tool, I don’t know why Microsoft not releasing any update or deprecated this tool but this by far best tool I have used.
Use Microsoft Visual Studio Code the current most powerful IDE is a great free tool to provide all types of functionality with third-party extensions that required for web designing or coding in any modern language. This tool is not just for web designer its also fulfill all the requirements for any modern code writing. I think that's is why Microsoft expression is deprecated because VS code has been reimagined with a modern interface and a fast, flexible coding engine to give web designers and front-end developers easier ways to create, code, and manage websites that look amazing on any size screen.
Now without wasting so much time let’s jump into main topics that we cover in this article. In this article we are going to discuss about:
- Pencil-paper web layout designing.
- Database designing.
- Web designing or code writing (proto-type).
- The connection between a database and website layout.
- Web-application testing.
1. Pencil - Paper Web Layout Designing (Wireframes):
This is an important step of any web or software designing process, by using this step you can imagine your web design with your creativity, imagination, and professionalism.
You can also follow the client’s needs if you are doing any clients project, because the client’s idea, view, and requirements are very important
Any custom layout or in a technical term called UI (user interface) & UX (user experience) design of back-bone of any web project. This also a first impression of any visitor to get engage with web-application.
Always keep in mind you have to imagine only a user point of view to make design easy to navigate any content and web layout should be responsive to all platforms whether it is mobile or laptop.
In some cases of projects, mobile may be separated that is based on layout complexity, something like for E-commerce website or any commercial sales or purchase website. So making any separate layout of any web-application is an advanced method to achieve in this kind of project.
Pencil-paper web designing may include you structure hierarchy and color combination of layout that includes home page, main activity page, contact us, services page etc.
After all the web layout did you have to create a database layout or attribute table that need in order to connect with this layout, because to creating dynamic web-application you may want to fetch all the data from the database so the non-technical person can easily update image & text content of a website.
Following is sample database table for contact us page:
| Name | Mobile | Location | Query | DateTime | |
|---|---|---|---|---|---|
The first row contains table attributes name & from second-row user data should be inserted like following sample user data:
| Name | Mobile | Location | Query | DateTime | |
|---|---|---|---|---|---|
| John | john@gmail.com | 09999999999 | India | Please call back us. | 10-3-2017 08:55 pm |
2. Database Designing:
You all know the database is an important part of any dynamic web-pages in terms of text content. So after completion of all the paper-based layout & database designing, the next step is to create a database in the real environment by creating database and table based on your requirements.
In order to create a database and table, you can use an in-app tool like a wamp server that provides a complete environment of MySQL engine (phpMyAdmin) to create the database and run the dynamic website on localhost computer or local machine for PHP language. Or
You can use query-based database and table creation to run following query from your database setup page.
Query for database creation
sample code
$servername = "localhost";
$username = "username";
$password = "password";
// Create connection
$conn = mysqli_connect($servername, $username, $password);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Create database
$sql = "CREATE DATABASE myDB";
if (mysqli_query($conn, $sql)) {
echo "Database created successfully";
} else {
echo "Error creating database: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
Query for creating attribute table
sample code
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// sql query to create table
$sql = "CREATE TABLE DemoTable (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP
)";
if (mysqli_query($conn, $sql)) {
echo "Table MyGuests created successfully";
} else {
echo "Error creating table: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
Database setup page - You can create this page after paper designing this setup page can create the database and attribute tables automatically by simply filling database name, server name, username, and password, but keep in mind you should have enough knowledge about MySQL queries before creating this setup page. This database setup page is very important for novice users who do not have any technical skills or if you are making any client project.
3. Writing Code:
Now this is the important part of any web designing to crafting any web layout by using front side programming language like: HTML & CSS & server-side programming language like: PHP.
This may be a prototype designing step if you are working for any client’s project, after prototype approval you can make your final changes in codes.
Some of the design guideline you can follow:
- Header
- Footer
- Library (this file contain common CSS, jQuery & JavaScript libraries)
- Function (this file may contain your common PHP functions)
- Database Connection File (this file contain the database connection code)
Sample database connection code
sample code
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
Above 5 are some short of common files that needed for all dynamic pages during layout creation, as these file are common file so you have to create these files or dynamic pages separately so you can make any changes through single file not to editing every single bit of file or page.
4. Connection B/w Database & Website Layout:
After all, layout is done the final work is to fetching content from a database to making website dynamic, so in order to do this you can run following query to fetch text data from a database:
Same query for data selection from database tables
Sample Code
$result = mysqli_query($conn, $sql);
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$id = $row["id"];
$firstname = $row["firstname"];
$lastname = $row["lastname"];
}
By using above code you can fetch all the data from DemoTable but make sure include database connection file in same page and write all this code in PHP wrapper.
Above code have 3 PHP variable that contains table data are (id, firstname, lastname), now you can echo/print this data anywhere in web-page layout.
5. Testing:
Finally, the web project test is very important aspects of quality of work that make every developer a professional, so always keep in mind after the completion of any web or software project you should make sure the web-application or any other software is working absolutely fine in all environment.
Test your software for all platforms or browsers, as your layout should be smooth and totally responsive to all devices.
Always make sure all the form, sign-in & sign-up should be properly validated or hacker-proof. You can achieve this by verifying any e-mail or mobile using OTP or verification link. Or
For an advanced level of security, you can create a 2-factor authentication system or 2-way authentication or 2-step verification system to provide an extra level of data security.
Conclusion:
In this article, we discussed steps to designing any dynamic website. Although this article is the only an outline of web designing topics, you can dig into more by studying yourself.
If you have any project idea or thought than you can check out our web designing & development services plans. We can have a highly professional and corporate level project experience team that fulfills your business dreams.
If you find this article worth to you please hit kudos, comment, & share with your friends and family to make worth to us being writing technical articles. Thanks very much see you in the next session.