diff --git a/build.gradle b/build.gradle
index de322fceebe23864820f63c414daeb1dcbe1c391..23c63713820b99e7cdc0d8d71af9859b937099a0 100644
--- a/build.gradle
+++ b/build.gradle
@@ -24,6 +24,8 @@ repositories {
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
+ implementation 'org.springframework.boot:spring-boot-starter-jdbc'
+ implementation 'org.mariadb.jdbc:mariadb-java-client:2.1.2'
compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
annotationProcessor 'org.projectlombok:lombok'
diff --git a/identifier.sqlite b/identifier.sqlite
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/data.sql b/src/data.sql
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/main/java/Team5/SmartTowns/Data/UserController.java b/src/main/java/Team5/SmartTowns/Data/UserController.java
new file mode 100644
index 0000000000000000000000000000000000000000..3d4487631b2ecf2b3aa41178dbe605957ca9524b
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/Data/UserController.java
@@ -0,0 +1,29 @@
+package Team5.SmartTowns.Data;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.servlet.ModelAndView;
+
+import java.util.*;
+@Controller
+public class UserController {
+
+ private List<user> users = List.of(
+ new user (1, "Mrs", "Hannah", "English", "hannah.english@gmail.com"),
+ new user (2, "Mr", "Tom", "Harper", "tom.harper2@gmail.com"),
+ new user (3, "Mrs", "Sarah", "Burton", "sarahburton@gmail.com"),
+ new user (4, "Mr", "Nigel", "Hopkins", "nigelahopkins@gmail.com")
+ );
+
+ @Autowired
+ private UserRepository userRepository;
+
+ @GetMapping("/userList")
+ public ModelAndView userList(){
+ ModelAndView mav = new ModelAndView("users.html");
+ List<user> users = userRepository.getAllUsers();
+ mav.addObject("users", users);
+ return mav;
+ }
+}
diff --git a/src/main/java/Team5/SmartTowns/Data/UserRepository.java b/src/main/java/Team5/SmartTowns/Data/UserRepository.java
new file mode 100644
index 0000000000000000000000000000000000000000..aea6a6f357f292ceb4770f23ae4f61744d6f5911
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/Data/UserRepository.java
@@ -0,0 +1,8 @@
+package Team5.SmartTowns.Data;
+
+import java.util.List;
+
+public interface UserRepository {
+ List<user> getAllUsers();
+
+}
diff --git a/src/main/java/Team5/SmartTowns/Data/UserRepositoryJDBC.java b/src/main/java/Team5/SmartTowns/Data/UserRepositoryJDBC.java
new file mode 100644
index 0000000000000000000000000000000000000000..17f15f9c465c85e6fe552108b906ef4b1c9e14fd
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/Data/UserRepositoryJDBC.java
@@ -0,0 +1,35 @@
+package Team5.SmartTowns.Data;
+
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.RowMapper;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public class UserRepositoryJDBC implements UserRepository{
+
+ private JdbcTemplate jdbc;
+ private RowMapper<user> userMapper;
+
+ public UserRepositoryJDBC(JdbcTemplate aJdbc){
+ this.jdbc = aJdbc;
+ setuserMapper();
+ }
+
+ private void setuserMapper(){
+ userMapper = (rs, i) -> new user(
+ rs.getInt("userId"),
+ rs.getString("Title"),
+ rs.getString("firstName"),
+ rs.getString("lastName"),
+ rs.getString("emailAddress")
+ );
+ }
+
+ @Override
+ public List<user> getAllUsers(){
+ String sql = "select * from user";
+ return jdbc.query(sql, userMapper);
+ }
+}
diff --git a/src/main/java/Team5/SmartTowns/Data/user.java b/src/main/java/Team5/SmartTowns/Data/user.java
new file mode 100644
index 0000000000000000000000000000000000000000..34e1711cafc28f1c8321f978bf32a8f221e99673
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/Data/user.java
@@ -0,0 +1,14 @@
+package Team5.SmartTowns.Data;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+
+@Data
+@AllArgsConstructor
+public class user {
+ private int userId;
+ private String title;
+ private String firstName;
+ private String lastName;
+ private String emailAddress;
+}
\ No newline at end of file
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index 8b137891791fe96927ad78e64b0aad7bded08bdc..53ed86601e2a0c11435882b29b46f210317c2771 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -1 +1,5 @@
+spring.datasource.url=jdbc:mariadb://localhost3306/database
+spring.datasource.username=root
+spring.datasource.password=comsc
+spring.sql.init.mode=always
diff --git a/src/main/resources/static/images/Facebook.png b/src/main/resources/static/images/Facebook.png
new file mode 100644
index 0000000000000000000000000000000000000000..e510c31874240120ec7ce84676f8a486bbc86923
Binary files /dev/null and b/src/main/resources/static/images/Facebook.png differ
diff --git a/src/main/resources/static/images/Instagram.jpg b/src/main/resources/static/images/Instagram.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..59e94d4c36bac36d4cdc346293568721a23d0082
Binary files /dev/null and b/src/main/resources/static/images/Instagram.jpg differ
diff --git a/src/main/resources/static/images/LinkedIn.jpg b/src/main/resources/static/images/LinkedIn.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6bf094d20c89883756ec5a105ec2cea1f9eeaf76
Binary files /dev/null and b/src/main/resources/static/images/LinkedIn.jpg differ
diff --git "a/src/main/resources/static/images/Twitter-Log\320\276.png" "b/src/main/resources/static/images/Twitter-Log\320\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c475939bfacb4be3559aab3d58a9a5eadf036afb
Binary files /dev/null and "b/src/main/resources/static/images/Twitter-Log\320\276.png" differ
diff --git a/src/main/resources/static/images/VZTA.png b/src/main/resources/static/images/VZTA.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c294080b020125d34f981e84952450bdbbe9168
Binary files /dev/null and b/src/main/resources/static/images/VZTA.png differ
diff --git a/src/main/resources/templates/towns/templates.server/Templating.html b/src/main/resources/templates/towns/templates.server/Templating.html
index 65a9c20b4115094f7ef70c2778eb8512198e197d..14343a76ea3cc2974dbdd50cc7bd3ade124adc17 100644
--- a/src/main/resources/templates/towns/templates.server/Templating.html
+++ b/src/main/resources/templates/towns/templates.server/Templating.html
@@ -1,16 +1,149 @@
-<header th:fragment="headerBlock">
- <br>Header Block<br>
-</header>
+<header class="headerBar th:fragment="header">
-<footer th:fragment="footerBlock">
- <br><b>VZTA</b><br>
- <br>Near Me Now LTD<br>
- <br>Britania House<br>
- <br>Caerphilly Business Park<br>
- <br>Caerphilly<br>
- <br>CF83 3GG<br>
- <br>(C) VZTA 2022<br>
- <br><b>Follow Us</b><br>
- <br>Facebook Twitter Instagram LinkedIn<br>
- <br>Privacy Policy Terms and Conditions<br>
-</footer>
\ No newline at end of file
+ <div class="Logo">
+ <img th:src="@{images/VZTA.png}" alt="VZTA Logo">
+ </div>
+ <nav class="navBar">
+ <ul>
+ <li>Home</li>
+ <li>FAQs</li>
+ <li>Contact us</li>
+ </ul>
+ <label class="work">Who we Work with:</label>
+ <select>
+ <ul>
+ <option value="localauthorities">Local Authorities</option>
+ <option value="towns">Towns</option>
+ <option value="businesses">Businesses</option>
+ <option value="consumers">Consumers</option>
+ </ul>
+ </select>
+ </nav>
+ </header>
+
+ <div class="footerBar" th:fragment="footer">
+ <div class="containerFooter">
+ <div class="leftFooter">
+ <h3>VZTA</h3>
+ Near Me Now LTD
+ <br>Britania House
+ <br>Caerphilly Business Park
+ <br>Caerphilly
+ <br>CF83 3GG
+ </div>
+ <div class="rightFooter">
+ <h3>Connect with us</h3>
+ <p>Be the first to know about updates by joining out Community page</p>
+ (C) VZTA 2022<br>
+ Policy Terms and Conditions
+ </div>
+ <div class="centerFooter">
+ <span class="footerText">
+ <h3>Follow Us</h3>
+ <a th:href=="https://www.facebook.com/VZTAsmarttowns/" class="icon"></a><img th:src="@{images/Facebook.png}" alt="Facebook Logo" class="picture">
+ <a th:href=="https://www.twitter.com/VZTAsmarttowns/" class="icon"></a><img th:src="@{images/Twitter-Logo.png}" alt="X (formally Twitter) Logo" class="picture">
+ <a th:href=="https://www.instagram.com/vztasmarttowns/" class="icon"></a><img th:src="@{images/Instagram.jpg}" alt="Instagram Logo" class="picture">
+ <a th:href=="https://'www.linkin.com/company/vztasmarttowns/" class="icon"></a><img th:src="@{images/LinkedIn.jpg}" alt="Linkedin Logo" class="picture"> <br>
+ </span>
+ </div>
+ <div class="copyright" style="text-align: left">
+
+ </div>
+ </div>
+ </div>
+</div>
+<style>
+ /* Header */
+ .headerBar {
+ border-bottom: 2px rgb(230, 230, 230) solid;
+ margin-bottom: 20px;
+ display: flex;
+ background: blueviolet;
+ }
+ /* Navbar Links */
+ .navBar {
+ margin-top: 50px;
+ margin-left: auto;
+ margin-right:20px;
+ text-align: right;
+ }
+ .work{
+ color: rgb(255, 255, 255);
+ }
+ .navBar ul {
+ list-style: none;
+ display: flex;
+ margin-left: 100px;
+ }
+ .navBar a {
+ border-left: 2px rgb(185, 185, 185) solid;
+ padding: 10px 40px;
+ text-decoration: none;
+ color:rgb(87, 86, 86);
+ white-space: nowrap;
+ overflow: hidden;
+ float: right;
+ }
+ .navBar a:hover {
+ background-color: rgb(209, 209, 209);
+ }
+ .navBar li{
+ margin-left: 10px;
+ margin-right: 10px;
+ color: rgb(255, 255, 255);
+ }
+ .navListLast {
+ border-right: 2px rgb(185, 185, 185) solid;
+ margin-right:40px;
+ }
+
+ /* Navbar Logo */
+ .Logo {
+ margin-left:10px;
+ padding: 20px;
+ width: fit-content;
+ }
+ .Logo img {
+ width: 120px;
+ margin-left:15px;
+ }
+
+ /* Footer */
+ footer {
+ margin-top:20px;
+ display: flex;
+ justify-content: center;
+ }
+ .footerBar{
+ border-top: 2px rgb(230, 230, 230) solid;
+ text-align: left;
+ display: flex;
+ background: blueviolet;
+ color: rgb(255, 255, 255);
+ padding-left: 30px;
+ }
+ .footerBar ul {
+ list-style: none;
+ display: flex;
+ }
+ .copyright{
+ text-align: left;
+ display: flex;
+ }
+ .containerFooter{
+ display: flex;
+ flex-direction: row;
+ }
+ .leftFooter{
+ flex:1;
+ color: rgb(255, 255,255);
+ }
+ .centerFooter{
+ flex: 1;
+ color: rgb(255, 255,255);
+ }
+ .rightFooter{
+ flex:1;
+ color: rgb(255, 255, 255);
+ }
+</style>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/templates.server/data.sql b/src/main/resources/templates/towns/templates.server/data.sql
new file mode 100644
index 0000000000000000000000000000000000000000..b4e9b9df0e49e705805e15bd302bebe9454c6449
--- /dev/null
+++ b/src/main/resources/templates/towns/templates.server/data.sql
@@ -0,0 +1,4 @@
+insert into users (userId, title, firstName, lastName, emailAddress) values (1, Mrs, Hannah, English, hannah.english@gmail.com);
+insert into users (userId, title, firstName, lastName, emailAddress) values (2, Mr, Tom, Harper, tom.harper2@gmail.com);
+insert into users (userId, title, firstName, lastName, emailAddress) values (3, Mrs, Sarah, Burton, sarahburton@gmail.com);
+insert into users (userId, title, firstName, lastName, emailAddress) values (4, Mr, Nigel, Hopkins, nigelahopkins@gmail.com);
diff --git a/src/main/resources/templates/towns/templates.server/schema.sql b/src/main/resources/templates/towns/templates.server/schema.sql
new file mode 100644
index 0000000000000000000000000000000000000000..61a942d82047a42e70af83e9e29a1e05e9a2dd62
--- /dev/null
+++ b/src/main/resources/templates/towns/templates.server/schema.sql
@@ -0,0 +1,8 @@
+create table if not exists users
+(
+ userId bigint auto_increment primary key,
+ title varchar(10),
+ firstName varchar(64),
+ lastName varchar(64),
+ emailAddress varchar(128)
+ ) engine =InnoDB;