Shopping Cart using PHP and MySQL

[@KhanamCoding]

CSS Styling: * { margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: none; font-family: "Poppins", sans-serif; } :root { --color1: #072227; --color2: #35858b; --color3: #4fbdba; --color4: #aefeff; --black: #000; --white: #fff; --lightgray: #d3d3d3; --red: rgb(238, 62, 62); } html { font-size: 62.5%; overflow-x: hidden; } .container { max-width: 1100px; margin: 0 auto; padding-bottom: 5rem; height: 100vh; background-color: var(--lightgray); } /* header styles */ .header { background-color: var(--color1); position: sticky; top: 0; left: 0; z-index: 1000; } .header .header_body { display: flex; align-items: center; padding: 2.5rem 2rem; } .header .header_body .logo { margin-right: auto; font-size: 2.5rem; color: var(--color4); } .header .header_body .navbar a { margin-left: 2rem; font-size: 2rem; color: var(--white); } .header .header_body .cart { margin-left: 2rem; font-size: 2rem; color: var(--white); } .header .header_body .navbar a:hover, .header .header_body .cart:hover { color: var(--color4); } .header .header_body .cart span { padding: 0 0.5rem; } #menu-btn { margin-left: 2rem; font-size: 2.5rem; cursor: pointer; color: var(--white); display: none; } /* index.php file */ .display_message { background-color: var(--color2); padding: 2.5rem 2rem; display: flex; align-items: center; justify-content: space-between; } .display_message span { font-size: 1.5rem; } .display_message i { font-size: 2.5rem; cursor: pointer; } .display_message i:hover { color: var(--red); } .heading { text-align: center; font-size: 3rem; text-transform: uppercase; padding: 1.5rem 0 2rem; color: var(--color1); } section { padding: 2rem; } /* add products form */ .add_product, .update_product { max-width: 600px; background-color: var(--color2); border-radius: 0.5rem; padding: 2rem; margin: 0 auto; margin-top: 2rem; } .add_product .input_fields, .update_product .input_fields { padding: 1rem 1.2rem; font-size: 1.6rem; color: var(--black); background-color: var(--white); margin: 1.5rem 0; width: 100%; } /* submit button */ .submit_btn, .edit_btn, .cancel_btn { display: block; width: 50%; text-align: center; background-color: var(--color1); color: var(--white); font-size: 1.7rem; padding: 1.2rem 3rem; border-radius: 0.5rem; cursor: pointer; margin-top: 2rem; margin: 0 auto; } .cancel_btn { background-color: var(--red); margin: 2rem auto; } .submit_btn:hover { color: var(--color3); } /* view_products.php */ .display_product table { width: 100%; text-align: center; } .display_product table thead th { padding: 1.5rem; font-size: 1.5rem; background-color: var(--color2); color: var(--white); } td { padding: 1rem; font-size: 1.5rem; color: var(--color1); border: 1px solid var(--white); text-transform: uppercase; } .empty_text { background-color: var(--color2); padding: 2.5rem 2rem; font-size: 2rem; text-align: center; } .btns { display: flex; justify-content: center; align-items: center; width: 100%; } .delete_product_btn, .update_product_btn { text-align: center; color: var(--red); font-size: 1.7rem; padding: 0 1rem; cursor: pointer; } .update_product_btn { color: var(--color2); } .product_container_box { text-align: center; height: 70%; } img { width: 20%; margin: 0 auto; } /* shop_product.php file styles */ .product_container { display: grid; grid-template-columns: repeat(auto-fit, 30rem); gap: 2rem; justify-content: center; } .product_container .edit_form { text-align: center; padding: 2rem; box-shadow: var(--black); border: var(--border); border-radius: 0.5rem; background-color: var(--white); box-shadow: 2px 5px 14px #888888; } .product_container .edit_form img { width: 50%; margin: 0 auto; } .products .edit_form h3 { margin: 1rem 0; font-size: 2rem; color: var(--black); text-transform: uppercase; } .products .edit_form .price { font-size: 1.7rem; color: var(--color1); margin: 1rem 0; } .cart_btn { text-align: center; padding: 1rem 0; } /* cart.php */ .shopping_cart table { text-align: center; width: 100%; } .shopping_cart table thead th { padding: 1.5rem; font-size: 1.6rem; color: var(--white); background-color: var(--color2); } .table_bottom { background-color: var(--color1); display: flex; justify-content: space-between; align-items: center; padding: 2rem; margin: 1rem 0 3rem 0; } .bottom_btn { color: var(--black); font-size: 1.3rem; background-color: var(--color4); padding: 1rem; } .bottom_btn span { color: green; } .delete_all_btn { background-color: var(--color1); color: var(--white); font-size: 1.3rem; padding: 1.5rem; } .delete_all_btn .fa-trash { color: var(--red); margin-right: 0.5rem; } .quantity_box { display: flex; justify-content: space-between; align-items: center; } .quantity_box input { width: 40%; padding: 0.5rem; } .update_quantity { color: var(--white); padding: 0.5rem; background-color: var(--color1); margin: 1rem 0; } /* media queries */ @media (max-width: 1200px) { .shopping_cart { overflow-x: scroll; } .shopping_cart table { width: 120rem; } .shopping_cart .heading { text-align: left; } .shopping_cart .checkout-btn { text-align: left; } } @media (max-width: 991px) { html { font-size: 55%; } } @media (max-width: 768px) { #menu-btn { display: inline-block; transition: 0.2s linear; } #menu-btn.fa-times { transform: rotate(180deg); } .header .header_body .navbar { position: absolute; top: 99%; left: 0; right: 0; background-color: var(--blue); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: 0.2s linear; } .header .header_body .navbar.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); background-color: var(--color1); } .header .header_body .navbar a { margin: 2rem; display: block; text-align: center; font-size: 2.5rem; } .display_product { overflow-x: scroll; } .display_product table { width: 90rem; } .table_bottom { display: block; text-align: center; } .bottom_btn { color: var(--black); font-size: 1.3rem; background-color: var(--color4); padding: 1rem; margin: 2rem 0; } } @media (max-width: 450px) { html { font-size: 50%; } .heading { font-size: 3rem; } .products .product_container { grid-template-columns: 1fr; } }

[@hollywoodbabes3536]

Source code, mam, please

[@AhmedAli-qj4zn]

It's not so easy to make a lengthy video.. with different techniques... you are an excellent teacher 👍🏻🥰❤️ Keep going ❤️

[@miss3773516]

You are phenomenal! I cannot imagine a better playlist, you explein everything so well and your code is beautiful!

[@islamraouf1856]

Super instructor...

[@AvishkaIshan-kk1eh]

All in one video... 😁😁😁

[@KhanamCoding]

😀yes

[@myatmin6403]

Just finished the course. I have learnt a lot from this . Thank you

[@saylikolapkar8818]

How much time it takes to complete?

[@myatmin6403]

@@saylikolapkar8818 4 days

[@peterpeter8421]

its been 3 days, I am like 60% there@@saylikolapkar8818

[@vumsh]

Hi, Thanks for the vide. Also make one video for contact form data submission backend part, so that we can collect the user data and send send them notifications

[@vishalsisodiya1580]

thank you for giving amazing playlist

[@leonardopoke25]

YOU ARE DE BEST!!

[@remimobolaji5650]

please when would you teach advance class on this topic?

[@beticohernandez9536]

How good will you make the purchase orders?

[@mudasarhussain1089]

Thank you so much mam

[@harunamin5606]

hei you are best pleass do more video thx.

[@mrsakthiofficial]

Thank you so much mam it's all of easly understand 🎉❤❤ thanks your efforts mam kindly i have need one request pls make more videos mam

[@TinotendaMuchenje-uv3vc]

Found this the right time, just when I thought I was doomed.

[@afrozakhanam-kj7uk]

In your shopping cart project I want to add a new feature like transaction(how much sell and purchase in one month) how can I show it..please help me to do that.

[@OnyekaPrince-m4o]

Since this cart method makes use of backend technology, and we are fetching all data submitted to the back end, won't customers be seeing what each other is buying in their own cart and checking out the same products

[@siddiquiadnan7143]

maam there is no any CSS code/file in playlist video no 5

[@saravananmsd1763]

Where use used session

[@abdullahicadde147]

Thank you for your support But i want to ask you a question that is suppose you have different products like 10 mobile ans 10 laptop so we want to know if the product mobile is 5 mobile to print warning to make order

[@KhanamCoding]

Hi Abdul. What I understood from your message is ,you have 10 mobiles and 10 laptops. If the product quantity reaches 5 you should be getting alert or warning stating product stock is getting over. Let me know if I understood correctly so that I can guide you accordingly 🙂

[@abdullahicadde147]

@@KhanamCoding yes Youu understood my question correctly Thank you for your response i hope you good

[@KhanamCoding]

Hi Abdul . Try this $query_stock = " Select case when sum(product_type = 'laptops' and quantity 0 then 'Laptops stock is below requirement' when sum(product_type = 'mobiles' and quantity 0 then 'Mobiles stock is below requirement' else"" end as message from table_name; "; // display message wherever is required in project

[@abdullahicadde147]

@@KhanamCoding thank you

[@VoxradioUK]

I can not see you video. KZbin frozen your video after 30 sec running

[@KhanamCoding]

Its working for me , just refresh it and see if its working.

[@mdjabedbhuiyan]

If possible please create pos system using php mysqli database. Thanks

[@GamerPLUT]

mam plz make a video EDGEDB in hindi full video

[@ayoubelhardi8525]

Thanks for your efforts, I have one question, can we integrate this cart 🛒 in our e-commerce project (other project)

[@OnyekaPrince-m4o]

Thanks for this brilliant question

[@amir4ever148]

mam please make a video on full ecommerce website with php mysql or nodejs mongodb and paytm payment

[@mbhavishyajain7221]

Mam i am unable to insert products when i click insert button its showing "not found the request url was not found on this server" pls response

[@KhanamCoding]

Check your file name and check if you have given correct file path while Inserting data .

[@kishansclan6250]

Css file ?

[@KhanamCoding]

Present in Video 5 of the playlist

[@prasanta_kumar82]

css code mam please

[@abdullahicadde147]

Please make a video

[@Eng-to-Tam]

Laravel video upload mam

[@KhanamCoding]

Working on that.it will take some time to upload . Once iam done with JS ,next I will start with lavarel

[@AyomideBliss]

Hi Coach, I hope this message finds you well. I'm reaching out to see if we could have a brief discussion about your Udemy course on PHP Mastery 2024-Basics to Advanced with 8 Hands-on Projects. I'm eager to collaborate and explore ways to further enhance it. Thank you for considering this opportunity.

[@atharvakarval1395]

github of this project

[@rajan-np2mo]

where is the css file link.?Atleast should have shown the css file completely if not intended to share the css file .

[@KhanamCoding]

Already pasted code in playlist - video number 5.Now, I have pinned code please check. Thanks for letting me know🙂🙌

[@mrsakthiofficial]

Thank you so much mam it's all of easly understand 🎉❤❤ thanks your efforts mam kindly i have need one request pls make more videos mam

[@mrsakthiofficial]

Thank you so much mam it's all of easly understand 🎉❤❤ thanks your efforts mam kindly i have need one request pls make more videos mam