As discussed in the last week’s session, this week, we will have a short introduction to what is API (for a detailed approach on how to make one, follow backend’s materials) and how we use API to set up communication between server and client, in order to retrive, authenticate and store information.
This week is all about JS (and ofc, HTML, CSS and Bootstrap!) and getting comfortable with it, before we introduce ReactJS in the next week!
Javascript is the programming language which runs on the web! Today, it also powers many backend servers and user applications. We use Javascript on the frontend to add logic to our webpage to make it interactive, using both Browser APIs and Web APIs.
API is an acronym that stands for Application Programming Interface and according to wikipedia, an application programming interface (API) is a computing interface which defines interactions between multiple software intermediaries.
Bootstrap is the world’s most popular framework for building responsive, mobile first sites. It utilises SaaS, a pre-built grid and powerful Javascript plug-ins. Saas is a scripting language that is compiled into CSS. Due to its structured syntax and additional features Saas is preferred over CSS.
Now that we have the login and sign up pages ready (hopefully, tailored to send info regarding admin or cashier portal login),we will now use Fetch APIs to interact with the given API to autheticate information sent from client. The Fetch method is a method provided by the Fetch API that is built into the browser. It is used to get access to data through the use of the HTTP protocol. It simplifies fetching resources, handling responses, and managing errors.
const requestUrl = "url of whatever you want to make a request to";
fetch(requestUrl)
.then(response => response.json())
.then(data => {
// do something with the data the API has returned
})
This is the general syntax of how a fetch request is made.
<script> </script> body or in your script.js file. (Or better, try it yourself!)Display Error Messages and Success Messages, depending on status of authentication. (Make it as informative as possible, no one likes to see a general “try again”).
Add the following lines to your code.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dashboard</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous"
/>
</head>
<body>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"
></script>
</body>
A form to enter customer mobile no.
(Further API integration will be covered in the next task)
You are free to add more, as you deem appropriate.
A dropdown to choose which stock to see.
(Further items will be covered in the future tasks, this is just to create the playground for the final portal).
You are free to add more, as you deem appropriate.
http://167.71.236.10/api/login/POSTDescription: Authenticate user credentials and retrieves token.
Request Body:
{
"username": "admin",
"password": "admin@dsoc24"
}
Practice of using HTML, Bootstrap and this time, using Javascript to add more functionality and interactivity to the portal!