Scribd
Upload
6 views

WebProgramming Lab Excercises From 1 To 6

Uploaded by

Harsha Parsiha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

WebProgramming Lab Excercises From 1 To 6

Uploaded by

Harsha Parsiha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Steps for from 1: Express Generator to Rendering (includes MVC,GitHub )

(NOTE: In addition to Exercises 1,2, and 3 i.e. HTML, JavaScript with CSS this lab
exercises will be continued for the lab record as well for as theory)
1) Create a folder name in some drive (which contains the name with the word
“Locatorsomething”). After this follow the steps using mouse and keyboard.

2) Open visual studio Code  …new Terminal-> (then type the following commands one
by one )

i.e. Enter commands to check version, node pocket manager, and then do the third step i.e
install express with global which has shown in above screen shot( if you get errors retype npm
install and npm start sequentially one after other till you get the required output).

1|Page
NOTE:Copy this
displayed
command by
terminal and
paste in
terminal(when
npm install is
given then
terminal only
shows the next
command to
be typed at
terminal).
Repeat this
command until
you get ‘0’
vulnerable(by
using upper
2|Page ‘arrow key’ to
repeat the
command)
After all these commands run from browser using following URL

3|Page
Bootstrap: (Exercise 2) (for styling and colouring to the web page)

3) Copy the public folder which is given to you. It must be in the same drive which you are using
to develop the application i.e. Locator4824 and this public folder must be in parallel inside
the drive (First delete existing public folder in visual studio code then only you can copy the
given public folder and Which is shown in following screen shot).

4|Page
NOTE: This document may have some small mistakes / issues so please carefully you try to
understand and follow. Of course, care has taken in preparation of this document still verify.

5|Page
6|Page
7|Page
8|Page
9|Page
10 | P a g e
11 | P a g e
12 | P a g e
Change above line as per the below line (after paste” copied relative path” ) You have to change
even forward slash as backward slash also.

13 | P a g e
NOTE: IN MVC/bootstrap, If you get output without
color to the web page then-

Use the following commands at command prompts in


the terminal so that you can get colors and you should
specific to line numbers to update in appropriate files
like app.jss (line no:7, 8, and 13)-

$ npm install
$ npm start

14 | P a g e
3. FOR MVC architecture: (Which displays same colors and page but new
folders Model and controller have to be created, 2 files routers and
views (drag and move) folders will be moved to parent directory)
NOTE: you can refer previous notes also for more clarity related to lab.

(i) Create folder app_server


(ii) Move views, routes to app_server folder
(iii) Open app.js edit line No: 13,7 and 8
13: app.set(‘views,path.join,(_dirname, ‘app_server’,’views’))
(iv) Again in same app.js
(v) 7: var indexRouter=require(‘./app_server/routes/index’)
(vi) 8: var userRouter=require(‘/app_server/routes/user’)
(vii) Create Models, Controllers in app_server (here check spellings carefully and also
check which are in the same level or which are subfolder in app_server)
(viii) Start browser and give localhost:3000 (as usual like in previous bootstap step)

15 | P a g e
Here in MVC the following folder name must be inserted in between 2
words, i.e at line number 13,7 and 8. Check carefully.

Output of MVC excercise

16 | P a g e
GitHub: which provides space to store our project in its repository so that
later we can call it when it becomes live (project).
Type ‘Git’ in google then you will get following menu. But if you are using
first time it asks your login username and password to create then only
you can store your project in Github. The sequence of screens are shown
as below.

17 | P a g e
18 | P a g e
In next screen the Git display the commands to enter at the terminal of
visual studio ( to provide space in git hub for our project)

19 | P a g e
20 | P a g e
Now open Visual Studio Code and type above commands one by one

Ctrl c to open terminal in visual studio (first and second commands


must be executed which are given in below)
$ Git init
$ Git add .

$ git commit -m "first commit"

21 | P a g e
$ git branch -M main (if any errors comes then you can
enter give following command OR proceed with the above sequence of
commands only )

Refresh browser (after all commands are executed in the terminal of


visual studio)

22 | P a g e
After entering for Git Hub the pages in google will display like the
following one by one in sequence. You have to choose options finally
your project will be deployed in the particular memory of GitHub

23 | P a g e
My past
projects are
also shown
if I have
created
earlier in the
git hub

Steps follows as usual which are shown in below screen shots


(click/choose based on the options )

24 | P a g e
NOTE: My new project
is to be shown here if I
select (as per option
given in the screen
shot) which is a service
for others in the future.

How to use “redering” to make our project (so first type “render in
google)

25 | P a g e
26 | P a g e
27 | P a g e
NOTE: This is
automatic display
just check it

28 | P a g e
NOTE: remove
“run” if it shows
$npm run start

It should appear
like

$ npm start

29 | P a g e
30 | P a g e
31 | P a g e
How others can access out projects? (if they have valid credential then they
can access our project which is a service now like other services in internet)
32 | P a g e

You might also like