Навигация по странице:

Проект. Муниципальное бюджетное общеобразовательное учреждение ШиловоКурьинская средняя общеобразовательная школа

Название	Муниципальное бюджетное общеобразовательное учреждение ШиловоКурьинская средняя общеобразовательная школа
Анкор	Проект
Дата	19.05.2022
Размер	54.79 Kb.
Формат файла
Имя файла	Проект.docx
Тип	Документы #538160

Муниципальное бюджетное общеобразовательное учреждение

Шилово-Курьинская средняя общеобразовательная школа

Создание сайта

Автор работы: Прокопьев

Максим Александрович

Руководитель: Мелехова

Елена Владимировна

2022

Java – версия может быть любой, у меня версия 11
Набор инструментов JDK
Среда разработки – их множество, но для языка Java подходит IntellijIDEA
Базовые знания языка Java
MampPro – позволит запустить и проверить наш сайт в локальной среде

Знакомство с SpringBoot

Почему Spring?

Spring делает программирование на Java быстрее, проще и безопаснее. Акцент Spring на скорости, простоте и производительности сделал его самым популярным Java-фреймворком в мире.

Гибкий и полный набор расширений и сторонних библиотек Spring позволяет разработчикам создавать практически любые приложения, которые только можно себе представить. По своей сути, функции управления инверсией Spring Framework (IoC) и внедрения зависимостей (DI) обеспечивают основу для широкого набора функций и функций. Независимо от того, создаете ли вы безопасные, реагирующие, облачные микросервисы для Интернета или сложные потоки потоковых данных для предприятия, у Spring есть инструменты, которые помогут вам. обеспечивают основу для широкого набора функций и функций. Независимо от того, создаете ли вы безопасные, реагирующие, облачные микросервисы для Интернета или сложныепотоки потоковых данных для предприятия, у Spring есть инструменты, которые помогут нам

В нашем случае SpringBoot очень подходит нам так-как Spring делает создание веб-приложений быстрым и беспроблемным. Удалив большую часть стандартного кода и конфигурации, связанных с веб-разработкой, вы получаете современную модель веб-программирования, которая упрощает разработку серверных HTML-приложений, API REST и двунаправленных систем, основанных на событиях.

Создаем фундамент сайта

Воспользуемся готовым решением от SpringBoot, фундамент нашего сайта я создал при помощи SpringInitializrhttps://start.spring.io/

Выбираем тип проекта – я выбрал Maven

Теперь нужно выбрать язык на котором будет написан наш сайт, в моем случае это язык Java. Выбираем способ упаковки и нашу версию java, я использую 11 версию. Все, наш фундаментполностью готов.

Работа с плагинами

Плагины нашего сайта хранятся в файле pom.xml. В нем уже хранится базовый набор плагинов для запуска сайта, но для красивого и работоспособного сайта их недостаточно. Добавляем плагин Thymeleaf

org.springframework.boot
spring-boot-starter-thymeleaf

Основная цель Thymeleaf-шаблоны html которые корректно отображаются в браузерах.

Теперь добавляем плагин MySQL, он нужен для работы с базой данных

mysql
mysql-connector-java
runetime

org.junit.vintage
junit-vintage-engine

можно начинать работу с кодом.

Настройка основного функционала

Добавляем папку Controllers и создаем в ней новый файл MainController. Таким образом мы создали контроллер который будет отвечать за переход на главную страницу

@Controller
public class MainController {

@GetMapping("/")
public String Home(Model model) {
model.addAttribute("title", "Главнаястраница");
return "home";
}

@GetMapping("/about")
public String about(Model model) {
model.addAttribute("title", "Поддержка");
return "about";
}
}

Теперь, так-как у нас новостной сайт добавляем NewsConroller

package com.Project.project.Controllers;

import com.Project.project.Models.Post;
import com.Project.project.repo.PostRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.Optional;

@Controller
public class NewsController {

@Autowired
private PostRepository postRepository;

@GetMapping("/news")
public String blogMain(Model model) {
Iterable
posts = postRepository.findAll();
model.addAttribute("posts", posts);
return "news-Main";
}
@GetMapping("/news/add")
public String blogAdd(Model model) {
return "news-Add";
}
@PostMapping("/news/add")
public String blogPostAdd(@RequestParam String title, @RequestParam String anons, @RequestParam String full_text, Model model) {
Post post = new Post(title, anons, full_text);
postRepository.save(post);
return "redirect:/news";
}
@GetMapping("/news/{id}")
public String blogDetails(@PathVariable(value = "id") long id, Model model) {
if(!postRepository.existsById(id)) {
return "redirect:/home";
}
Optional
post = postRepository.findById(id);
ArrayList
res = new ArrayList<>();
post.ifPresent(res::add);
model.addAttribute("post", res);
return "news-detailes";
}
@GetMapping("/news/{id}/edit")
public String blogEdit(@PathVariable(value = "id") long id, Model model) {
if(!postRepository.existsById(id)) {
return "redirect:/news";
}
Optional
post = postRepository.findById(id);
ArrayList
res = new ArrayList<>();
post.ifPresent(res::add);
model.addAttribute("post", res);
return "news-edit";
}

@PostMapping("/news/{id}/edit")
public String blogPostUpdate(@PathVariable(value = "id") long id,@RequestParam String title, @RequestParam String anons, @RequestParam String full_text, Model model) {
Post post = postRepository.findById(id).orElseThrow();
post.setTitle(title);
post.setAnons(anons);
post.setFull_text(full_text);
postRepository.save(post);

return "redirect:/news";
}
@PostMapping("/news/{id}/remove")
public String blogPostDelite(@PathVariable(value = "id") long id, Model model) {
Post post = postRepository.findById(id).orElseThrow();
postRepository.delete(post);

return "redirect:/news";
}
}

Мы настроили переход на другие страницы сайта, добавили возможность добавлять, удалять и редактировать наши новости, но пока что это не имеет смысла так как у нас нет нужной модели поста, создаем папку Models, cоздаем в ней файл Post

package com.Project.project.Models;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Post {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;

private String title, anons, full_text;
private int views;

public Post() {

}

public Long getId(){
return id;
}

public void setId(Long id) {
this.id = id;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public String getAnons() {
return anons;
}

public void setAnons(String anons) {
this.anons = anons;
}

public String getFull_text() {
return full_text;
}

public void setFull_text(String full_text) {
this.full_text = full_text;
}

public Post(String title, String anons, String full_text) {
this.title = title;
this.anons = anons;
this.full_text = full_text;
}

public int getViews() {
return views;
}

public void setViews(int views) {
this.views = views;
}
}

После всего этого нужно создать новый репозиторий. Создаем папку Repos, в нем создаем файл PostRepository и в него мы добавим всего лишь одну строку

public interface PostRepository extends CrudRepository
, Long> {
}

Для моего тестового сайта, такого набора функционала вполне достаточно.

Настройка MySQL и MampPro

Теперь нам нужно подключить наш проект к базе данных

Плагин мы уже подключили, теперь работаем с файлом application.properties

server.port=8082

В данном файле мы прописываем порт нашего сервера по умолчанию он = 8080

Но если этот порт занят, мы меняем его на 8081 8082 и т.д. Теперь запускаем OpenServer и переходим на сайт http://localhost/phpMyAdmin у MampProстоят стандартные настройки пользователя, а именно порт на котором находиться база данных 3306

spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:3306/Project_in

Имя пользователя и пароль так же по умолчанию = root

spring.datasource.username=root
spring.datasource.password=root

Теперь прописываем настройку наше базы данных, так как мы хотим ее видо изменять и добавлять новости ставим значение update

spring.jpa.hibernate.ddl-auto=update

итоговыйвариантвыглядитследующимобразом

server.port=8082
spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:3306/Project_in
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name =com.mysql.jdbc.Driver
#spring.jpa.show-sql: true

в этой строке вместо Project_in пишем название своей базы данных

spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:3306/Project_in

С технической стороны наш сайт работает и функционирует, но если мы сейчас его запустим мы ничего не увидим, потому что у нас нет html файлов.

Оформление сайта

Займемся оформлением нашего сайта.

Для этого создаем папку templates в которой и будут храниться наши html файлы. Создадим первый файл и назовем его home.html этот файл будет содержать в себе оформление главной страницы

Создавать свой шаблон это долго, поэтому обратимся к сайту https://getbootstrap.com/ возьмем готовую шапку и footer

Вставляем готовый код и подключаем bootstrapcdn

Он нужен для корректного отображения шаблона

HTML>

style="color: aliceblue" class="fw-light">Привет!

style="color: aliceblue" class="lead text-muted">СайтсозданПрокопьевымМаксимомвкачествеиндивидуальногопроекта.

style="background:url('https://g.foolcdn.com/image/?url=https%3A//g.foolcdn.com/editorial/images/470515/computer-circuit-board-illuminated-in-red-and-blue.jpg&w=2000&op=resize')">

style="color: aliceblue">Новости сайта

th:text="${el.title}">

th:text="${el.anons}"/>
'/Blog/' + ${el.id}" class="btn btn-warning">Детальнее

style="background:url('https://g.foolcdn.com/image/?url=https%3A//g.foolcdn.com/editorial/images/470515/computer-circuit-board-illuminated-in-red-and-blue.jpg&w=2000&op=resize')">

Редактирование

<br /><br /><br /><button type="submit" class="btn btn-success">Обновить</button><br /></form><br /></div><br /></div><br /><br /><div th:insert="<span>Blocks/footer :: footer</span>"></div><br /><span lang="en-us">style="background:url('https://g.foolcdn.com/image/?url=https%3A//g.foolcdn.com/editorial/images/470515/computer-circuit-board-illuminated-in-red-and-blue.jpg&w=2000&op=resize')"><br /><header th:insert="<span>Blocks/header :: header</span>"></header><br /><br /><div class="container mt-5"><br /><div th:each="<span>el : ${post}</span>" class="alert alert-info mt-2"><br /><h3><span lang="en-us">th:text="<span>${el.title}</span>"></h3><br /><br /><span lang="en-us">th:text="<span>${el.full_text}</span>"><br /><br /><br /><b>Просмотры:</b><span th:text="<span>${el.views}</span>"/><br /><br />'/Blog/' + ${el.id} + '/edit'</span>" class="btn btn-warning">Редактировать<br /><br /><br /><form th:action="<span>'/Blog/' + ${el.id} + '/remove'</span>" method="post"><br /><button class="btn btn-warning" type="submit">Удалить</button><br /><input type="hidden" name="_csrf" value="{{_csrf.token}}" /><br /></form><br /><br /></div><br /></div><br /><br /><div th:insert="<span>Blocks/footer :: footer</span>"></div><br /><span lang="en-us">style="background:url('https://g.foolcdn.com/image/?url=https%3A//g.foolcdn.com/editorial/images/470515/computer-circuit-board-illuminated-in-red-and-blue.jpg&w=2000&op=resize')"><br /><header th:insert="<span>Blocks/header :: header</span>"></header><br /><br /><div class="container mt-5 mb-5"><br /><h2><span lang="en-us">style="color: aliceblue">Добавлениестатьи</h2><br /><form action="/Blog/add" method="post"><br /><input type="text" name="title" placeholder="Введитеназваниестатьи" class="form-control"><br /><br /><input type="text" name="anons" placeholder="Введитеанонсстатьи" class="form-control"><br /><br /><textarea name="full_text" placeholder="Введитеполныйтекстстатьи" class="form-control">

написать администратору сайта

Проект. Муниципальное бюджетное общеобразовательное учреждение ШиловоКурьинская средняя общеобразовательная школа

Оглавление

Знакомство с SpringBoot

Работа с плагинами

Настройка основного функционала

Настройка MySQL и MampPro

Оформление сайта

style="color: aliceblue">Новости сайта

th:text="${el.title}">

Редактирование