Products Demo Page

HTML CSS Javascript PHP MySQL To Build A Website (Simple Example)

Welcome to a beginner’s tutorial and simple example of how to use HTML, CSS, Javascript, PHP, and MySQL together to build a website. Just started with web development, and wondering how we can “put” all the different technologies together?

Various technologies and languages work together to create a website, each of them handling a different aspect.

• HTML deals with the structure and layout of web pages.
• CSS to handle the visuals and cosmetics.
• Javascript to add dynamic elements to the webpage.
• MySQL database to store data permanently.
• PHP to do server-side processing and transactions.

Yep, some of you guys may already know that. So let us walk through the development of a simple product page in this guide – Read on!

TABLE OF CONTENTS

EXAMPLE DEVELOPMENT CYCLE

All right, let us now get started with the development of the products page itself.

STEP 1) THE PLAN – DIVIDE AND CONQUER

• Goal & Overview: As Captain Obvious as this may be, we need to create a page to display products from the database.
• Server-Side Database (MySQL): To keep things simple, the database will only capture the product name and description.
• Server-Side PHP: Create a script that gets product information from the database.
• Client-Side HTML & CSS: Use the PHP script to create an HTML page to show the products, CSS for the styling.
• Client-Side Javascript: Finally, use Javascript to add dynamic elements to the HTML page. For example, what happens when the user clicks on a product.

STEP 2) CREATING MYSQL DATABASE TABLES

2A) THE SQL

-- (A) PRODUCTS TABLE CREATE TABLE `products` ( `product_id` bigint(20) NOT NULL, `product_name` varchar(128) NOT NULL, `product_description` text ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ALTER TABLE `products` ADD PRIMARY KEY (`product_id`), ADD KEY `product_name` (`product_name`); ALTER TABLE `products` MODIFY `product_id` bigint(20) NOT NULL AUTO_INCREMENT; -- (B) DUMMY PRODUCTS INSERT INTO `products` (`product_id`, `product_name`, `product_description`) VALUES (1, 'Vulture Of Fortune', 'A sweated bump consents across the here separator.'), (2, 'Guardian Without Duty', 'Does a table migrate inside an excessive paranoid?'), (3, 'Enemies Without Hope', 'A cured parameter fears behind the phenomenon.'), (4, 'Lords Of The Void', 'The diary scores around the generalized lie.'), (5, 'Doctors And Aliens', 'The diary scores around the generalized lie.'), (6, 'Blacksmiths And Criminals', 'A considerable snail works into a purchase.');

2B) TABLE STRUCTURE

2C) MYSQL DATABASE NOTES & EXPLANATION

Personally, I will always start with the database, simply because it serves as the foundation of almost every project. It is also important to get the required fields correct right from the start, or changing the database structure later can be a very painful process.

STEP 3) SERVER-SIDE PHP SCRIPTS

3A) THE SCRIPT

 PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_NAMED ]); // (C) GET PRODUCTS $stmt = $pdo->prepare("SELECT * FROM `products`"); $stmt->execute(); $products = $stmt->fetchAll();

3B) PHP NOTES & EXPLANATION

PHP is the next piece of the foundation, and the above is an oversimplified example of how we can use PHP to fetch data from the database… But this is actually kind of bad. In actual projects, we would have created a proper class library, object-oriented style. For example:

class Products < function get ($id) < // SELECT * FROM `products` WHERE `id`= $ID >function add ($name, $desc) < // INSERT INTO `products` (. FIELDS . ) >function delete ($id) < // DELETE FROM `products` WHERE `id` = $ID >>

STEP 4) HTML PAGE

4A) THE SCRIPT

       
  
 ?>
  

4B) HTML NOTES & EXPLANATION

So what is happening here!? Why is the file extension PHP instead of HTML? That’s right – We are using PHP alongside HTML here. No need to be confused. Remember the script we wrote earlier to fetch product data from the database? We are simply using it on this page to generate the product’s HTML, that’s all.

STEP 5) THE CSS

5A) THE SCRIPT

/* (A) WHOLE PAGE */ * < font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; >body < max-width: 600px; padding: 10px; margin: 0 auto; background: #f2f2f2; >/* (B) BOOKS */ #books < display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 10px; >.bookWrap < border: 1px solid #dbdbdb; background: #fff; >.bookImg < display: block; width: 100%; >.bookTitle < font-weight: 700; font-size: 16px; color: #333; >.bookDesc

5B) CSS NOTES & EXPLANATION

Nothing much here actually. CSS is the part that deals with cosmetics and styles in HTML.

STEP 6) THE JAVASCRIPT

6A) THE SCRIPT

window.addEventListener("load", () => < // (A) GET ALL BOOKS var books = document.querySelectorAll(".bookWrap"); // (B) ATTACH ONCLICK TO ALL BOOKS for (let book of books) < book.onclick = () =>< // (B1) GET SELECTED BOOK ID, NAME, DESCRIPTION var name = book.querySelector(".bookTitle").innerHTML, desc = book.querySelector(".bookDesc").innerHTML; // (B2) SHOW IN DIALOG BOX alert(`You have selected - ID: $, TITLE: $ DESC: $`); >; > >);

6B) JAVASCRIPT NOTES & EXPLANATION

This is yet another overly simplified example. On a “normal” products page, Javascript would have been used to send an “add to cart” process to the server when a product is selected. Also, you can pretty much already guess what Javascript can do – Remove from the cart, checkout, submit forms, form checks, load more content from the server, change themes, etc… Pretty much all kinds of processing that are dynamic.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s it for all the code, and here are a few small extras that may be useful.

SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC)

• Requirement Analysis – What is required? What does the client need?
• Planning – Divide-and-conquer. What needs to be done?
• Design – The database structure, software architecture, and page design.
• Development – Actual coding.
• Testing & Deployment – Test the code, and put it live on the Internet.

Some people may have different steps for the SDLC, but that is the general process. Also, take note that SDLC does not stop after just one cycle – We may review our projects later, and decide that things need to change. The whole SDLC cycle starts again, and it never really ends.

FRONT-END, BACK-END, FULL-STACK

• Project Manager (Full-Stack) – The boss. He/she/it deals with the wide overview, processes, structure of the entire system, and even support for other platforms such as mobile apps.
• Lead/Senior Web Developers (Full-Stack) – Does everything. HTML, CSS, Javascript, PHP, MySQL, and whatever else. AKA Superman.
• Junior Web Developers (Front End) – Creates the webpages. HTML, CSS, Javascript.
• Junior Web Developers (Back End) – Does PHP, MySQL. More on the administration panel and server-side libraries instead.

So yeah, it is only further up the ladder that we need to really deal with “everything and beyond”.

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to better understand – HTML, CSS, Javascript, PHP, MySQL, they are all different components, but they all work together to create a single website or system.

It may be overwhelming at first to deal with many things at once, so take it step-by-step, and the rest will be just like learning how to cycle. Once you catch the gist and flow, it will be much easier. If you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

100+ mini web projects using HTML, CSS and JavaScript.

License

solygambas/html-css-javascript-projects

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

100 Projects In 100 Days — HTML, CSS & JavaScript

100+ mini web projects using HTML, CSS and JavaScript.

#	Project	Live Demo
001	Expanding Cards	Live Demo
002	Progress Steps	Live Demo
003	Rotating Navigation Animation	Live Demo
004	Hidden Search Widget	Live Demo
005	Blurry Loading	Live Demo
006	Scroll Animation	Live Demo
007	Split Landing Page	Live Demo
008	Form Wave	Live Demo
009	Sound Board	Live Demo
010	Dad Jokes	Live Demo
011	Event Keycodes	Live Demo
012	FAQ Collapse	Live Demo
013	Random Choice Picker	Live Demo
014	Animated Navigation	Live Demo
015	Incrementing Counter	Live Demo
016	Drink Water	Live Demo
017	Movie App	Live Demo
018	Background Slider	Live Demo
019	Theme Clock	Live Demo
020	Button Ripple Effect	Live Demo
021	Drag N Drop	Live Demo
022	Drawing App	Live Demo
023	Kinetic Loader	Live Demo
024	Content Placeholder	Live Demo
025	Sticky Navbar	Live Demo
026	Double Vertical Slider	Live Demo
027	Toast Notification	Live Demo
028	GitHub Profiles	Live Demo
029	Double Click Heart	Live Demo
030	Auto Text Effect	Live Demo
031	Password Generator	Live Demo
032	Good Cheap Fast	Live Demo
033	Notes App	Live Demo
034	Animated Countdown	Live Demo
035	Image Carousel	Live Demo
036	Hoverboard	Live Demo
037	Pokedex	Live Demo
038	Mobile Tab Navigation	Live Demo
039	Password Strength Background	Live Demo
040	3D Background Boxes	Live Demo
041	Verify Account UI	Live Demo
042	Live User Filter	Live Demo
043	Feedback UI Design	Live Demo
044	Custom Range Slider	Live Demo
045	Netflix Mobile Navigation	Live Demo
046	Quiz App	Live Demo
047	Testimonial Box Switcher	Live Demo
048	Random Image Feed	Live Demo
049	Todo List	Live Demo
050	Insect Catch Game	Live Demo
051	Video Background	Live Demo
052	Portfolio with CSS Grid	Live Demo
053	Touch Slider	Live Demo
054	CSS Loaders	Live Demo
055	Glass Dashboard	Live Demo
056	Image Comparison Slider	Live Demo
057	Parallax Background with SVG	Live Demo
058	3D Product Card	Live Demo
059	Form Validator	Live Demo
060	Movie Seat Booking	Live Demo
061	Custom Video Player	Live Demo
062	Exchange Rate Calculator	Live Demo
063	DOM Array Methods	Live Demo
064	Menu Slider & Modal	Live Demo
065	Hangman Game	Live Demo
066	Meal Finder	Live Demo
067	Expense Tracker	Live Demo
068	Music Player	Live Demo
069	Infinite Scroll Posts	Live Demo
070	Typing Game	Live Demo
071	Speech Text Reader	Live Demo
072	Memory Cards	Live Demo
073	Lyrics Search App	Live Demo
074	Relaxer App	Live Demo
075	Breakout Game	Live Demo
076	New Year Countdown	Live Demo
077	Sortable List	Live Demo
078	Speak Number Guessing Game	Live Demo
079	Creative Agency Website	Live Demo
080	Health Dashboard	Live Demo
081	Animated SVG	Live Demo
082	Parallax Landing Page	Live Demo
083	Full-Screen Image Slider	Live Demo
084	Fluid Image Lightbox	Live Demo
085	Sneaker Shop	Live Demo
086	Coming Soon Page	Live Demo
087	Sliding Sign In & Sign Up Form	Live Demo
088	Promo Code	Live Demo
089	One Color UI	Live Demo
090	Tooltip	Live Demo
091	Chat Interface	Live Demo
092	Music Streaming Service	Live Demo
093	Creative Portfolio	Live Demo
094	Laptop UI	Live Demo
095	Headphones Product Page	Live Demo
096	Cloud Hosting Service	Live Demo
097	Terminal Style Landing Page	Live Demo
098	Magazine Layout	Live Demo
099	Parallax Website	Live Demo
100	Hulu Webpage Clone	Live Demo

This repository is mostly based on 2 courses by Brad Traversy (2020):

The other projects are adapted from various YouTube channels:

• Brad Traversy — Traversy Media
• Shaun Pelling — The Net Ninja
• Simo Edwin — Dev Ed
• Gary Simon — DesignCourse
• Kyle Cook — Web Dev Simplified
• Kevin Powell
• Florin Pop

Источник