Shopping Cart using PHP and MySQL
HTML-код
- Опубликовано: 10 сен 2024
- ❤️ Thanks for supporting KhanamCoding!
🎉Enroll into Free Course: www.udemy.com/...
❤️Source Code:
buymeacoffee.c...
❤️Udemy Premium Courses:
🎓Enroll in courses with premium learning experience & support KhanamCoding!😃
1️⃣PHP from Basics to Advanced with 8 Hands-on Projects- www.udemy.com/...
2️⃣PHP CRUD Operation - www.udemy.com/...
3️⃣Registration System using PHP - www.udemy.com/...
4️⃣JavaScript Interview Practice: www.udemy.com/...
❤️UPI ID: khaiserz@ybl - Your contribution will fund the equipment, software, and other essentials needed to plan, shoot, and edit courses like this. Thank you sincerely!
❤️SOCIAL MEDIA
➡️Instagram: / khaiserkhanam
➡️LinkedIn: / khaiserkhanam
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;
}
}
Source code, mam, please
It's not so easy to make a lengthy video.. with different techniques... you are an excellent teacher 👍🏻🥰❤️ Keep going ❤️
You are phenomenal! I cannot imagine a better playlist, you explein everything so well and your code is beautiful!
Just finished the course. I have learnt a lot from this . Thank you
How much time it takes to complete?
@@saylikolapkar8818
4 days
its been 3 days, I am like 60% there@@saylikolapkar8818
Found this the right time, just when I thought I was doomed.
How good will you make the purchase orders?
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
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
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.
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
thank you for giving amazing
playlist
Super instructor...
All in one video... 😁😁😁
😀yes
maam there is no any CSS code/file in playlist video no 5
YOU ARE DE BEST!!
hei you are best pleass do more video thx.
Thank you so much mam
please when would you teach advance class on this topic?
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
Check your file name and check if you have given correct file path while Inserting data .
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.
mam please make a video on full ecommerce website with php mysql or nodejs mongodb and paytm payment
If possible please create pos system using php mysqli database. Thanks
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
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 🙂
@@KhanamCoding yes
Youu understood my question correctly
Thank you for your response i hope you good
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
@@KhanamCoding thank you
Thanks for your efforts, I have one question, can we integrate this cart 🛒 in our e-commerce project (other project)
Thanks for this brilliant question
Can you pls upload booking system using php mysql?
Where use used session
mam plz make a video EDGEDB in hindi full video
css code mam please
github of this project
Css file ?
Present in Video 5 of the playlist
Please make a video
Laravel video upload mam
Working on that.it will take some time to upload . Once iam done with JS ,next I will start with lavarel
where is the css file link.?Atleast should have shown the css file completely if not intended to share the css file .
Already pasted code in playlist - video number 5.Now, I have pinned code please check. Thanks for letting me know🙂🙌
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
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