- Display Products
- Top Sale
- Special Price
- New Phones
- Blogs
- View Product
- Add to cart
- Wishlist
- HTML/CSS
- SASS
- PHP
- MySQL
- bootstrap v4.4
- font-awesome
- owl-carouse 2
- jquery
- jquery.isotope v3.0.6
- bootstrap: styles css
- SASS: modern CSS
- owl-carouse: Slider items
- isotope: filter products
.
├── .gitignore
├── README.md
├── cart.php
├── footer.php
├── functions.php
├── header.php
├── index.js
├── style.css
├── assets
├── database
├── Cart.php
├── DBController.php
├── Product.js
└── shopee.sql
├── HTML Template
└── Template
├── notFound
├── _cart_notFound.php
└── _wishlist_notFound.php
├── _banner-ads.php
├── _banner-area.php
├── _blogs.php
├── _cart-template.php
├── _new-phones.php
├── _products.php
├── _special-price.php
├── _top-sale.php
├── _wishlist_template.php
└── ajax.php
- Use the cmd to clone repo to your computer
git clone https://github.com/tinspham209/shopee-clone
- Install XAMP
- copy project to
C:\xampp\htdocs
- Open XAMP Control Panel
- Run MySQL, open myphpadmin, create new table name:
shopee
- open phpadmin, import file
./database/shopee.sql
to database. After that, we have 4 tables: cart, product, user, wishlist - open file
./database/DBController.php
, change config of$host, $user, $password, $database
to your XAMP config - Start Apache
- Open project by connect to url:
http://localhost:${YOUR_APACHE_PORT}/shopee-clone/index.php
Example: My Apache PORT: 8888, 8899 & MySQL PORT: 8899
//./database/DBController.php
protected $host = 'localhost:8899';
protected $user = 'root';
protected $password = '';
protected $database = "shopee";
main page url: http://localhost:8888/shopee-clone/index.php
phpmyadmin url: http://localhost:8888/phpmyadmin
- cd to
HTML Template
folder
cd ./HTML%20Template
- Generate
style.css
from.scss
file by this line:
npm start
- Download extension: Live Server on VSCode
- Open project with Live Server
- Update with your idea
- After that, copy & refactor new html tag to each component on
Template
folder - Copy file from
./HTML Template/style.css
to./styles.css
- Initial project
- Install library: bootstrap, font-awesome, owl-carouse
- Initial project sass: variables, global style, colors
- Navbar
- Setup Owl Carousel
- Main site
- Banner Main site
- Top Sale
- Special Price
- Banner ads
- New Phones
- Blogs
- Footer
- Product page
- Product
- Product price
- Policy
- order details
- color
- product qty section
- size
- product description
- add function up & down product qty
- Cart page
- Shopping cart section
- shopping cart items
- cart item
- product rating
- product qty
- product price
- subTotal section
- input quantity
- Install XAMP
- Install PHPStorm
- Refactor:
index.html
toindex.php
product.html
toproduct.php
cart.html
tocart.php
- MySQL connection
- Closing connection
- create data table
- cart
- product
- user
- wishlist
- import data to db
- Connect DB to PHP
- Connect project to product table
- Update
-top-sale.php
with data - Update
-special-price.php
with data- Filter by brand
- Update
-new-phones.php
with data - Shuffle products
- Product page
- Click unique product on homepage > Render to
product.php
- Click unique product on homepage > Render to
- Add to Cart function
- Display product when addToCart
- Cart Items
- Count
- Sum
- Delete Cart Item
- Handle Duplicate Product
- Handle SubTotal products
- Wishlist UI
- Wishlist add to cart
- Shopping Cart Add to Wishlist
- Handle Empty Cart
- Handle button
add to cart
onproduct.php
when item is on cart
I have improve my knowledge about
- Review my HTML/CSS knowledge
I have understand about
- How to use bootstrap v4.4
- use owl-carousel to make slides of products
- use isotope for filter product by brand
- Setup XAMP
- Setup MySQL myphpadmin
- Setup PHPStorm for coding and connect to MariaDB
- how to convert
html
tophp
file - connect MySQL to project
- update unique product from
db
tohtml tag
- filter in php
- Fetch unique itemID & userID when click addToCart
- Handle Duplicate Product by Unique ID
Next Steps:
- Deploy