Источник:
- видео от 09.12.2022 г. "JAVA СОЗДАНИЕ САЙТА С 0" https://www.youtube.com/watch?v=lXDJqbpQ-rg;
- видео от 2023 г. "Как выложить код(проект) из IntelliJ IDEA на GITHUB." https://rutube.ru/video/fd26834494bb95b907777100ca13b163/.
-
Скачать и установить JDK Development Kit 23.0.1 с официального сайта https://www.oracle.com/java/technologies/downloads/#jdk21-windows
-
в Windows нажать комбинацию клавиш "Windows+S", в поисковой строке набрать "перемен"
-
выбрать "Изменение среды текущего пользователя"
-
нажать кнопку "Создать", чтобы создать переменную. Имя переменной: JAVA_HOME, значение переменной (путь к файлу): C:\Program Files\Java\jdk-23\bin\java.exe. Нажать кнопку "ОК"
-
скачать архив с папкой Apache Maven с официального сайта https://maven.apache.org/download.cgi
-
вытаскиваем из zip архива папку "apache-maven-3.9.9", запихиваем её в папку "Program Files", будет путь: C:\Program Files\apache-maven-3.9.9
-
Выбрать "Path" ("Изменение среды текущего пользователя" = "Shift+S") и нажать кнопку "Изменить". Потом кнопку "Создать" и вставить путь к файлу Maven "C:\Program Files\apache-maven-3.9.9\bin\mvn" Сохранить изменения кнопкой "ОК". Закрыть окно "Системные переменные" кнопкой "ОК"
-
Скачать и установить IntelliJ IDEA Community Edition https://www.jetbrains.com/idea/download/?section=windows
-
зайти на сайт фреймворка Spring https://start.spring.io/
-
создать сборку в Spring:
- заполнить поля Group и Artifact;
- выбрать язык Java и его версию;
- фреймворк Maven (Apache Maven);
- добавить Зависимости:
- Spring Web
- Thymeleaf
-
Нажать на кнопку "Generate"
-
Распаковать скаченный zip архив на диск D в папку с будущим проектом.
-
запустить папку, ранее извлеченную из скачанного архива, с помощью IntelliJ IDEA Community Edition
-
src --> main --> java --> папка с названием твоего сайта --> правой клавишей мыши щелкнуть по данной папке
-
в меню нажать "New" --> "Java Class" --> "SiteController" --> кнопка "Enter" на клавиатуре
-
в файле с названием сайта ввести к примеру:
package site.kryakena.MyFirstSite;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class MyFirstSiteApplication {
public static void main(String[] args) {
SpringApplication.run(MyFirstSiteApplication.class, args);
}
}- в файле "SiteController" ввести к примеру:
package site.kryakena.MyFirstSite;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.Mapping;
@Controller
//* Аннотация к контроллеру помогает Sping понять, какой класс является повторителем нашего запроса. Он перехватывает запрос и немедленно отправляет информацию
public class SiteController {
@GetMapping ("/main")
//* Использование GetMapiing отправляет ответ на запрос GET на указанный адрес маршрутизатора
public String getMain() {
return "main.html"; }
}-
"resources" --> правой клавишей мыши щелкнуть по папке "templates" --> "New" --> "HTML File" --> main --> кнопка "Enter" на клавиатуре
-
в файле "main.html" ввести к примеру:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HELLO WORLD</title>
</head>
<!--<style>
h1 {
color: green;
font-size: 200px;
padding: 30px;
display: none;
}
body {
background: black;
}
</style>-->
<!--<script>
function helloShow(){
document.getElementById('hello').style.display='block'
document.getElementById('button').style.display='none'
}
</script>-->
<body>
<h1 id="hello">HELLO WORLD</h1>
<button onclick="helloShow()" id="button">SHOW</button>
</body>
</html>-
зайти в файл с названием сайта из пункта 16
-
нажать в 7 строке на значок запуска сборки, в меню выбрать "Run" с зелёной стрелкой вправо
-
подождать, пока сайт билдится (собирается)
-
если все успешно: открывается внизу IntelliJ IDEA Community Edition раздел "Run", где есть номер локального хоста, все данные и версии о сборке
-
в браузере в новой вкладке в адресной строке ввести "http://localhost:8080/main"
- Ввести в файле "main.html" 2 произвольных тега, добавить CSS и скрипт (что происходит при нажатии кнопки "SHOW")
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HELLO WORLD</title>
</head>
<style> /* здесь можно вводить любые значения, но как в файле CSS менять не получится */
h1 {
color: green; /* зеленый цвет шрифта */
font-size: 200px; /* размер шрифта */
padding: 30px; /* отступ от краёв */
/* Свойство margin-top CSS определяет внешний отступ в верхней части элемента. Значения длины: margin-top: 10px - абсолютное значение; margin-top: 1em - относительно размера текста; margin-top: 5% - относительно ширины ближайшего контейнера */
display: none;
}
.kryakena {
/* произвольный тег */
background: red;
}
.kryaken {
color: green;
font-size: 200px;
padding: 30px;
}
body {
background: black;
}
</style>
<script type="text/javascript">
function helloShow(){
document.getElementById('hello').style.display='block'
document.getElementById('button').style.display='none'
}
</script>
<body>
<h1 id="hello">HELLO WORLD</h1>
<button class='kryakena kryaken' onclick="helloShow()" id="button">SHOW</button>
</body>
</html>- src --> main --> resources --> templates --> application.properties
server.port=80-
в браузере в новой вкладке в адресной строке ввести "http://localhost:80/main"
-
при нажатии кнопки на клавиатуре "Enter" номер порта автоматически уходит и получается адрес http://localhost/main
-
IntelliJ IDEA Community Edition --> раздел в правом верхнем углу "Maven" --> нажать на кнопку "Консоль"
-
в модальном окне ввести команду "mvn clean install"
-
если успешно пройдет сборка - в разделе "Run" будет "Build success"
-
в разделе "Notifical" щелкнуть по ссылке о успешной сборке
-
появятся файлы в папке "target"
-
открыть в IntelliJ IDEA Community Edition раздел "Git" --> стрелочка вниз --> "Settings"
-
выбрать "GitHub" --> нажать знак плюс и добавить свой аккаунт на GitHub
-
чтобы раскрыть меню --> щелкнуть правой клавишей мыши на меню вверху и нажать в окошке "Show menu..."
-
выбрать в "Git" --> "GitHub" --> "Share..."
-
дать название git и краткое название, нажать кнопку, чтобы расшарить