Create personalized cards easily for birthdays, anniversaries, weddings, and thank-yous with our unique drag-and-drop custom card design feature. Our intuitive platform offers a real-time editing experience, and you can easily download your customized cards in PDF format to enhance the user experience.
This website was developed for our client, Huzaifa Bin Afzal, with permission to include it in our portfolio and upload it to GitHub.
Features
Different Cards : You can make various types of cards, such as Birthdays, Anniversaries, Weddings, and Thank Yous
Easy to Use : It's simple to create and personalize your cards.
See Changes Quickly : You can see how your card looks as you make changes.
Save and Share : You can save your cards and share them with friends.
Download Option : You can even download your cards as PDF files.
Role : I was the only person working on this
Challenges : Ensuring user-friendly navigation while enabling real-time changes was a key challenge. The custom card design feature, allowing users to drag content and customize cards, presented another important aspect of the project.
Project Languages Used : HTML, CSS, Bootstrap Jquery, PHP , Mysqli PDO, AJAX
Setting Up Your Project
Before proceeding, ensure that both the project name is set to "cardmaker" and the database name is set to "cardmaker. If you wish to change the project name, follow these steps:"
-
Change Project Folder Name:
- First, navigate to the root directory of your project on your local machine.
- Rename the folder from "cardmaker" to your desired project name.
-
Update JavaScript (custom.js) File:
- Inside your project folder, find the "custom.js" file.
- Open it using a code editor of your choice.
In the "custom.js" file, locate the following line:
var pageUrl = window.location.origin + '/cardmaker';
Replace
'cardmaker'with your project's name. For example:var pageUrl = window.location.origin + '/your_project_name';
-
Update PHP (allFunction.php) File:
- Inside your project folder, find the "allFunction.php" file.
- Open it using a code editor of your choice.
In the "allFunction.php" file, locate the following line:
define("BASEURL", "http://localhost/cardmaker");
Replace
'cardmaker'with your project's name. For example:define("BASEURL", "http://localhost/your_project_name");
-
Save Changes: After making these modifications, make sure to save both the "custom.js" and "allFunction.php" files.
-
Test Your Project: Finally, you should be able to run your project with the updated name by accessing it through your local web server.
By following these steps, you've renamed the project folder and updated the JavaScript and PHP files to use the new project name. Make sure that your web server is running, and you should be able to access your project with the new name.
Project ScreenShot
Home Page : Welcome to Card Maker! Explore various card types such as Birthday and Anniversary. Easily create personalized cards, but remember to log in first. If you click on a card without logging in, you'll be redirected to the login page.
Register Page : On our Registration Page, you can sign up to become a member of Card Maker. To get started, provide your full name, email address, password, and confirm your password. You can also add a profile picture to personalize your account. Once you've filled in the details, you'll be ready to create amazing cards.
Login Page : To access your account, simply enter your registered email and password. Once you're in, you can continue crafting beautiful cards and enjoying our services.
Wedding Card Create Page : Easily make your ideal wedding card here. Put in event info like names, date, time, and place, plus a message. Choose colors, pictures, and text style – see it all as you go.
Eid Card Create Page : Craft your dream wedding card effortlessly on our platform. Input event details like names, date, time, and location, alongside a personal message. Customize the style with background color, picture, font color, style, and size, all shown in real-time preview.
Happay Birthday Card Create : Design a memorable Happy Birthday card effortlessly. Personalize style with colors, images, and fonts. Add recipient's details, birthdate, and heartfelt message, then finish with a special footer. Create a one-of-a-kind card that's sure to bring joy!.
Happy Anniversary Card Create : Make a special Anniversary card easily. Change colors, pictures, and text. Put in who it's for, a message, and a unique footer. It's a heartfelt way to celebrate.
Thank You Card Create : Make your Thank You card here. Choose fonts, background style, and text look. Write a title and a thankful message to create a card that shows your appreciation.
Visiting Card Create : Easily create your Visiting Card: upload a profile image, choose a background style, and select text appearance. Add your details - name, profession, contact info, and social links for a personalized touch.
Edit Your Profile :
Enhance your profile details easily on the edit page:
Update your Full Name and Email.
Set a New Password and Confirm it securely.
Change your Profile Picture effortlessly.
Effortlessly manage your information and keep your account up to date.
Index2 Page :
Browse your collection of designed Wedding cards.
Effortlessly update or remove cards as desired.
Share cards with friends for quick and enjoyable viewing.
Download your cards in PDF or image format.
Birthday list Page :
See all your Birthday cards at a glance.
Easily update, add, or remove cards.
Share with friends and download for safekeeping.
Eid list Page :
Effortlessly manage your Eid cards
View, update, and share Eid cards easily, and download in PDF format.
Anniversary list Page : Effortlessly manage, update, and share anniversary cards, with the option to download them in PDF format.
Thank You list Page : Effortlessly manage, update, and share your thank you cards, while also having the option to download them in PDF format.
Visiting Card list Page : Effortlessly manage, update, and share your visiting cards, with the added convenience of downloading them in PDF format.
Edit Visiting Card Page : Edit ALL Information.