The First Web Application I Created.
I’m in my 1st year 2nd semester at university as a software engineering student. a few weeks ago I have the assignment to create a SPA (Single Page Application) Application using HTML, CSS & JavaScript Knowledge. so I decided to create a very simple web-pos-system.
Tools and languages I used.
Intellij IDEA.
Figma.
HTML.
CSS.
jQuery.
JavaScript
Bootstrap.
- SPA POS System. can Manage customers and items and place an order.
Dashboard.
Customer.
Items.
Place Order.
Order Details.
so I start to design Site-Map and Wire-Frame. and then after create Site-Map and Wire-Frame I start to design my application Figma. it takes a few days more than I think because I'm not good at designing 😉. if you wanna check you can go to this link and check but don’t judge. after designing I start coding.
I used bootstrap to create my interfaces, actually, it's so easy to use CSS frameworks like bootstrap more than a design using CSS. Basically, Bootstrap is a CSS framework that we can create an interface quickly and easily. if you wanna know about bootstrap you can use this video. and here have a full 2-hour course about the bootstrap framework. I mostly used Intellij IDEA.
And I didn't use Valina JavaScript to create this. I used jQuery. Valina JavaScript is if you used only JavaScript without any framework or library it’s called Valina JavaScript. but here I used jQuery. jQuery is a JavaScript library designed to simplify HTML DOM trees etc.
Also, I didn’t use Backend Technologies to save data here I used arrays to save data. when I refresh the application data will disappear. it’s okay this 1st step so...
Here are some images from My Application.
1. Dashboard Before Adding anything to the system
customer, items, and order counts are 0. Because there are no data added to the system. And there have 4 images and 4 buttons which are shortcuts for the top navigation bar panels.
2. Customer Panel Before Add data.
3. After customer Add.
4. Item Panel Before Add Items.
5. After Item Add.
6. Before placing an Order.
7. After selecting the customer id and item code.
After selecting the customer id other fields also fill automatically. and the same thing happens with items. we only need to add OrderQTY and Add to cart button will be available after adding OrderQTY.
8. After adding the customer and item detail cart table.
9. Enter cash and discount and press Place order.
After pressing the place order button order will be placed and data will remove from the input fields and the Order ID will generate for the next order.
10. Order detail Table after the order is complete.
Here we can check the all details of orders and can search by order ID, customer name, and item name.
so this is how I create my first web application. if you want to check this you can check this link and My GitHub.
