Part1

parts instructions parts backend To achieve the following goals in the syllabus: You should be
able to make a web application adapted for different target groups with programming per
techniques for both client and server side. You should have an understanding of and be able to
use different techniques to deliver interactive and dynamic content to the client. I recommend
that you start the parts work and clarify what needs to be done, install the software you need and
also start signing the parts report. The parts 3pcs that are during the back-end part of the course
are together, and parts 4-6 (frontend) are also together so each parts session will build on the
past. The parts sessions are carried out individually and submitted to me when all parts are
completed. You should get started with the development of programs in nodejs. This is done by
installing nodejs using node version manager (recommended) or by installation file from
https://nodejs.org/en/download/ You should also create a package.json file using npm (npm init).
The packages that will be required to succeed in all three parts are:
1. express
2. sqlite3
3. bluebird
4. To install packages, use npm install [package name] -save At the first part point, you
should create a web server that listens to a specific port, and if you browse to the
address:port, you should get a response back with your user name for example (Admin)
You should create your server using express.js and create at least two additional
endpoints, one to download products and one to add products. These endpoints should
respond with json-formatted data. Extra information if you have time for: Continue with
express.js and define several endpoints, such as to remove a product or to search for a
particular product. Put your endpoints in your own file and export to express. You should
use comments on all code what you have done.

After the last part, your code should be sent into the course room as a zip file. Submissions where
the node_modules folder is included node_modules will automatically be considered incorrect
and will not be corrected, but a supplement will be required. Once you've zipped your code, try
unpacking it on your computer before submitting to ensure that the correct files are submitted.

Part2
Parts instructions part 2, backend To achieve the following goals in the syllabus: You should be
able to make a web application adapted for different target groups with programming
techniques for both client and server side. You should have an understanding of and be able to
use different techniques to deliver interactive and dynamic content to the client.

you should proceed to encode your backend based on previous parts work. Task Since you from
the part one already started with the coding of your backend, you should in this part continue in
your existing project. The npm packages needed for this part are Bluebird Sqlite Install package,
use npm install [package name] -save In addition, you should create a database file (such as
app.db) in visual studio code. The database will require you to have a table for your products,
such as products. The table should contain at least the following columns. Name Description
Price Id (unique) Create a table for users. The following columns should be included. Email
(unique) Firstname Lastname Password Id (unique)

You should also create a connection to the database using nodejs/sqlite and create at least one
method for reading the data from the tables. Here you will create a file that exports methods to
module.exports. So, for example, you create a database.js file that defines up functions that you
then export with module.exports.

For example, you create two asyncrona methods: getUser() getProducts() Extra information if you
have time for: Create a relationship table for your products that contain category Use your file
with routes to retrieve data from your database file. In order to keep up with everything that
needs to be done.

Part 3
Hi your details are that on my existing website that I have not yet published
make the desired changes below, I was going to start a webshop, the website
you can open in example visual studio code, I attach my so far made files,
These changes you need to make, below the mentioned features need to be
available: Users: Get a list of users Get a specific user's information Let a
user sign in Submit username and password Return User name if you could
log in otherwise some kind of error Products: Get a list of products that
include names, prices, and IDs. Download a specific product using the
product ID. Save a new product. Delete a product. Update an existing product.
All endpoints should respond with a json format result. All endpoints should
have a correct verb to manage the request, for example, DELETE should be
used to remove a product. Use any session storage to create sessions for the
user so you can log in "for real", such as m.h.a
https://github.com/expressjs/session If you choose to do this, make sure that
the endpoints require you to be logged in (except the login endpoint itself).
Add the ability to add images when you create a product, for example, use
https://github.com/expressjs/multer

Part 4
Bootstrap part Use the Bootstrap framework to create a front-end for a
shopping website. For each of the three parts you will build on the previous
one until you have a finished product composing of a backend-end and a front-
end where the front-end dynamically gets its data from the back-end using the
endpoints you have already created. These parts must be carried out
individually in own project maps, you will be creating the responsive layout of
your website using the Bootstrap framework. Your website must include at
least the following features:
1. A Navbar including a logo, menu items and a search bar.
2. A Carousel.
3. Cards showing products (product image, product name and price). The
cards must also contain a “read more” button which when clicked opens a
Modal that should show complete details of that product (image, name, price
and description), in addition to an “add to cart” button and a “close” button.
4. A Shopping Cart page in which you can view the products added to the
cart, delete a product from the cart and update a product in the cart (for
example change quantity).
5. A footer.
6. If you have multiple pages in your website, make sure to add a Breadcrumb.
Feel free to design your website the way you want with as many or as few
pages as you want (i.e. you could aim for a one-page website if you wish). Get
creative and expand on the above main features. Don’t forget to check the
responsive behavior in your website.
Part 5
This part is intended to adjust dynamically creating HTML elements using
JavaScript, in addition to populating it with JSON data. Bring your webpage to
life. Instructions: Dynamically create Bootstrap Cards in JavaScript and
populate them with JSON data returned as results from a “volumes” search in
Google Books (by sending an HTTP GET request to the server) using the
Google Books API. The web page must contain:
1. A search bar in which the user can search for books by book title or author.
2. Bootstrap 4 Cards which will be dynamically created in JavaScript and
populated with JSON data.
3. The Cards should contain the book thumbnail as the image, the book title,
book description and a “read more” button.

Part 6
In the tpart 6 you will join the back-end to the front-end developing a
complete web app.

This part consists of two parts, please read the instructions for both:

Instructions part 1:

Using the Bootstrap framework, create an admin page for your website. Within
this page the admin must be able to add a product to the database, delete a
product from the database, update a product and view all products in the
database. This should be done by means of AJAX requests on JSON data using
your end-points.

The admin page in its simplest form should look something like this: A

table showing all products:

Inspiration: You can add functionality to show/filter/sort products by category.

Continues on the next page...

When an “id” is clicked the following modal pops up in which you can update
and delete products:

Similarly, when “add product” is clicked, the following modal pops up:
This is just an example of what the page should look like, you can implement
your own design as long as you cover all the functionality.
Continues on the next page

Instructions part 2:

Bring your website to life by dynamically populating it with data from the
database using AJAX requests on JSON data. (i.e. make the static layout you
created in part 1 dynamic). The design is completely up to you.

You must include functionality for the shopping cart on your website either in
the back-end or front-end. The shopping-cart functionality includes adding a
product to the cart, deleting a product, updating a product and viewing all
products in the shopping cart.

More Information:

For this part you will need to consider both shorthand methods for AJAX
requests and the full version depending on how you have implemented your
back-end.
Example: The method jQuery.getJSON( url [, data ] [, success ] ), which you
know as $.getJSON is a shorthand AJAX function equivalent to:

For more information on AJAX functions check out the documentation here:
https://api.jquery.com/jQuery.ajax/