Skip to content

Commit 1e1195c

Browse files
alihassan0alihassan0
committed
Add server side rendering
1 parent 4162b0a commit 1e1195c

File tree

4 files changed

+141
-4
lines changed

4 files changed

+141
-4
lines changed

‎app/controllers/projectController.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,23 @@ let projectController = {
99
if(err)
1010
res.send(err.message);
1111
else
12-
res.send(projects);
12+
res.render('index', {projects});
1313
})
1414
},
1515

1616
createProject:function(req, res){
1717
let project = new Project(req.body);
1818

1919
project.save(function(err, project){
20-
if(err)
20+
if(err){
2121
res.send(err.message)
22-
else
23-
res.send("your project " + project.title + " has been added succesfully");
22+
console.log(err);
23+
}
24+
else{
25+
26+
console.log(project);
27+
res.redirect('/');
28+
}
2429
})
2530
}
2631
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"license": "ISC",
1111
"dependencies": {
1212
"body-parser": "^1.16.1",
13+
"ejs": "^2.5.5",
1314
"express": "^4.14.1",
1415
"mongoose": "^4.8.2"
1516
}

‎server.js

+3
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@ var DB_URI = "mongodb://localhost:27017/portfolio";
77

88
var app = express();
99

10+
app.set('view engine', 'ejs');
11+
1012
// configure app
1113
app.use(bodyParser.urlencoded({extended:false}));
14+
app.use(express.static(__dirname+ '/public'));
1215

1316
mongoose.connect(DB_URI);
1417
app.use(router);

‎views/index.ejs

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
</html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>My Portfolio</title>
7+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
8+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
9+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
10+
<style media="screen">
11+
* {
12+
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
13+
font-weight: bolder;
14+
}
15+
16+
.row {
17+
margin: 0;
18+
}
19+
20+
.navbar-default {
21+
height: 100px;
22+
padding-top: 23px;
23+
padding-left: 70px;
24+
border: 0;
25+
border-radius: 0 !important;
26+
background: #2c3e50;
27+
}
28+
29+
.navbar-default .navbar-brand {
30+
text-transform: uppercase;
31+
font-size: 2em;
32+
text-decoration: none;
33+
color: white;
34+
transition: color 0.3s ease;
35+
cursor: pointer;
36+
}
37+
38+
.navbar-default .navbar-brand:hover {
39+
color: #18bc9c;
40+
transition: color 0.3s ease;
41+
}
42+
43+
.card {
44+
padding: 10px;
45+
padding-top: 20px;
46+
background: #18bc9c;
47+
border: 1px #c8c3ff solid;
48+
border-radius: 5px;
49+
text-align: center;
50+
margin: 10px 3% 1% 3%;
51+
height: 190px;
52+
width: calc(80% * (1/3));
53+
}
54+
55+
.card .card-title {
56+
color: #02695e;
57+
font-size: 2em;
58+
font-weight: bold;
59+
text-transform: capitalize;
60+
}
61+
62+
.card .card-link {
63+
margin-top: 40px;
64+
font-size: 1.1em;
65+
font-weight: bold;
66+
width: 90%;
67+
border: 2px solid white;
68+
color: white;
69+
background: transparent;
70+
transition: background-color 0.5s ease;
71+
}
72+
73+
.card .card-link:hover {
74+
color: #18bc9c;
75+
background: white;
76+
transition: background-color 0.5s ease;
77+
}
78+
79+
.form-container {
80+
height: 400px;
81+
border-left: 1px solid gray;
82+
padding-left: 30px;
83+
}
84+
85+
.form-control {
86+
width: 90%;
87+
}
88+
</style>
89+
</head>
90+
91+
<body>
92+
<nav class="navbar navbar-default">
93+
<div class="container-fluid">
94+
<div class="navbar-header">
95+
<a class="navbar-brand" href="/home">MY PORTFOLIO</a>
96+
</div>
97+
</div>
98+
</nav>
99+
<div class="row">
100+
<div class="col-xs-12 col-md-8">
101+
<div class="row">
102+
<% for(var i=0; i<projects.length; i++){%>
103+
<div class="card col-xs-4">
104+
<h4 class="card-title"> <%= projects[i].title %></h4>
105+
<a href="<%= projects[i].URL %>" class="btn btn-primary card-link">Visit Website</a>
106+
</div>
107+
<% } %>
108+
</div>
109+
</div>
110+
<div class="col-xs-12 col-md-4">
111+
<div class="form-container">
112+
<h3 style="margin-bottom:40px;">Add New Project</h3>
113+
<form class="form" method="POST" action="/project">
114+
<div class="form-group">
115+
<label for="InputTitle">Title</label>
116+
<input name = "title" type="text" class="form-control" id="InputTitle" placeholder="Title">
117+
</div>
118+
<div class="form-group">
119+
<label for="InputLink">Link</label>
120+
<input name = "URL" type="url" class="form-control" id="InputLink" placeholder="Link">
121+
</div>
122+
<button type="submit" class="btn btn-default">Submit</button>
123+
</form>
124+
</div>
125+
</div>
126+
</div>
127+
128+
</html>

0 commit comments

Comments
 (0)