init + add M0
This commit is contained in:
commit
ef34991abd
14
.gitignore
vendored
Normal file
14
.gitignore
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.DS_Store
|
||||||
|
|
||||||
|
node_modules/*
|
||||||
|
|
||||||
|
db/*
|
||||||
|
!db/.gitkeep
|
||||||
|
|
||||||
|
!nginx
|
||||||
|
nginx/*
|
||||||
|
!nginx/nginx.conf
|
||||||
|
|
||||||
|
!php
|
||||||
|
php/*
|
||||||
|
!php/php.ini
|
||||||
36
README.md
Normal file
36
README.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
## Docker-compose LEMP
|
||||||
|
### Inkluderar
|
||||||
|
- nginx -> localhost:80
|
||||||
|
- php
|
||||||
|
- mariadb -> mariadb
|
||||||
|
- phpmyadmin -> localhost:8080
|
||||||
|
|
||||||
|
### HowTo
|
||||||
|
|
||||||
|
##### Webbroten
|
||||||
|
www/public
|
||||||
|
##### Starta servern (containern) med
|
||||||
|
docke compose up -d
|
||||||
|
##### Stoppa servern (containern) med
|
||||||
|
docker compose down
|
||||||
|
##### Serverns url
|
||||||
|
localhost
|
||||||
|
##### phpmyadmin
|
||||||
|
localhost:8080
|
||||||
|
##### Anslut till MariaDB med php
|
||||||
|
|
||||||
|
````php
|
||||||
|
<?php
|
||||||
|
// Definierar konstanter med användarinformation.
|
||||||
|
define ('DB_USER', 'userName'); // Användare i MariaDB
|
||||||
|
define ('DB_PASSWORD', '12345');
|
||||||
|
define ('DB_HOST', 'mariadb');
|
||||||
|
define ('DB_NAME', 'dbName'); // Databasen som anslutning skall ske till
|
||||||
|
|
||||||
|
// Skapar en anslutning till MariaDB och databasen dbName
|
||||||
|
$dsn = 'mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=utf8';
|
||||||
|
$db = new PDO($dsn, DB_USER, DB_PASSWORD);
|
||||||
|
?> // Ej nödvändigt att avslut "ren" php med ?>
|
||||||
|
````
|
||||||
|
### ToDo
|
||||||
|
|
||||||
208
config/mysql/my.cnf
Normal file
208
config/mysql/my.cnf
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
# Copyright © 2020 Joel Paulsson, Noah Jarvis
|
||||||
|
#
|
||||||
|
# This program is free software: you can redistribute it and/or modify
|
||||||
|
# it under the terms of the GNU Affero General Public License as published by
|
||||||
|
# the Free Software Foundation, either version 3 of the License, or
|
||||||
|
# (at your option) any later version.
|
||||||
|
#
|
||||||
|
# This program is distributed in the hope that it will be useful,
|
||||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
# GNU Affero General Public License for more details.
|
||||||
|
#
|
||||||
|
# You should have received a copy of the GNU Affero General Public License
|
||||||
|
# along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
|
# MariaDB database server configuration file.
|
||||||
|
#
|
||||||
|
# You can copy this file to one of:
|
||||||
|
# - "/etc/mysql/my.cnf" to set global options,
|
||||||
|
# - "~/.my.cnf" to set user-specific options.
|
||||||
|
#
|
||||||
|
# One can use all long options that the program supports.
|
||||||
|
# Run program with --help to get a list of available options and with
|
||||||
|
# --print-defaults to see which it w ould actually understand and use.
|
||||||
|
#
|
||||||
|
# For explanations see
|
||||||
|
# http://dev.mysql.com/doc/mysql/en/server-system-variables.html
|
||||||
|
|
||||||
|
# This will be passed to all mysql clients
|
||||||
|
# It has been reported that passwords should be enclosed with ticks/quotes
|
||||||
|
# escpecially if they contain "#" chars...
|
||||||
|
# Remember to edit /etc/mysql/debian.cnf when changing the socket location.
|
||||||
|
[client]
|
||||||
|
port = 3306
|
||||||
|
socket = /var/run/mysqld/mysqld.sock
|
||||||
|
default-character-set = utf8mb4
|
||||||
|
|
||||||
|
# Here is entries for some specific programs
|
||||||
|
# The following values assume you have at least 32M ram
|
||||||
|
|
||||||
|
# This was formally known as [safe_mysqld]. Both versions are currently parsed.
|
||||||
|
[mysqld_safe]
|
||||||
|
socket = /var/run/mysqld/mysqld.sock
|
||||||
|
nice = 0
|
||||||
|
|
||||||
|
[mysqld]
|
||||||
|
character-set-client-handshake = FALSE
|
||||||
|
character-set-server = utf8mb4
|
||||||
|
collation-server = utf8mb4_unicode_ci
|
||||||
|
|
||||||
|
#
|
||||||
|
# * Basic Settings
|
||||||
|
#
|
||||||
|
#user = mysql
|
||||||
|
pid-file = /var/run/mysqld/mysqld.pid
|
||||||
|
socket = /var/run/mysqld/mysqld.sock
|
||||||
|
port = 3306
|
||||||
|
basedir = /usr
|
||||||
|
datadir = /var/lib/mysql
|
||||||
|
tmpdir = /tmp
|
||||||
|
lc_messages_dir = /usr/share/mysql
|
||||||
|
lc_messages = en_US
|
||||||
|
skip-external-locking
|
||||||
|
#
|
||||||
|
# Instead of skip-networking the default is now to listen only on
|
||||||
|
# localhost which is more compatible and is not less secure.
|
||||||
|
#bind-address = 172.17.0.1
|
||||||
|
#
|
||||||
|
# * Fine Tuning
|
||||||
|
#
|
||||||
|
max_connections = 100
|
||||||
|
connect_timeout = 5
|
||||||
|
wait_timeout = 600
|
||||||
|
max_allowed_packet = 16M
|
||||||
|
thread_cache_size = 128
|
||||||
|
sort_buffer_size = 4M
|
||||||
|
bulk_insert_buffer_size = 16M
|
||||||
|
tmp_table_size = 32M
|
||||||
|
max_heap_table_size = 32M
|
||||||
|
#
|
||||||
|
# * MyISAM
|
||||||
|
#
|
||||||
|
# This replaces the startup script and checks MyISAM tables if needed
|
||||||
|
# the first time they are touched. On error, make copy and try a repair.
|
||||||
|
myisam_recover_options = BACKUP
|
||||||
|
key_buffer_size = 128M
|
||||||
|
#open-files-limit = 2000
|
||||||
|
table_open_cache = 400
|
||||||
|
myisam_sort_buffer_size = 512M
|
||||||
|
concurrent_insert = 2
|
||||||
|
read_buffer_size = 2M
|
||||||
|
read_rnd_buffer_size = 1M
|
||||||
|
#
|
||||||
|
# * Query Cache Configuration
|
||||||
|
#
|
||||||
|
# Cache only tiny result sets, so we can fit more in the query cache.
|
||||||
|
query_cache_limit = 128K
|
||||||
|
query_cache_size = 64M
|
||||||
|
# for more write intensive setups, set to DEMAND or OFF
|
||||||
|
#query_cache_type = DEMAND
|
||||||
|
#
|
||||||
|
# * Logging and Replication
|
||||||
|
#
|
||||||
|
# Both location gets rotated by the cronjob.
|
||||||
|
# Be aware that this log type is a performance killer.
|
||||||
|
# As of 5.1 you can enable the log at runtime!
|
||||||
|
#general_log_file = /var/log/mysql/mysql.log
|
||||||
|
#general_log = 1
|
||||||
|
#
|
||||||
|
# Error logging goes to syslog due to /etc/mysql/conf.d/mysqld_safe_syslog.cnf.
|
||||||
|
#
|
||||||
|
# we do want to know about network errors and such
|
||||||
|
#log_warnings = 2
|
||||||
|
#
|
||||||
|
# Enable the slow query log to see queries with especially long duration
|
||||||
|
#slow_query_log[={0|1}]
|
||||||
|
slow_query_log_file = /var/log/mysql/mariadb-slow.log
|
||||||
|
long_query_time = 10
|
||||||
|
#log_slow_rate_limit = 1000
|
||||||
|
#log_slow_verbosity = query_plan
|
||||||
|
|
||||||
|
#log-queries-not-using-indexes
|
||||||
|
#log_slow_admin_statements
|
||||||
|
#
|
||||||
|
# The following can be used as easy to replay backup logs or for replication.
|
||||||
|
# note: if you are setting up a replication slave, see README.Debian about
|
||||||
|
# other settings you may need to change.
|
||||||
|
#server-id = 1
|
||||||
|
#report_host = master1
|
||||||
|
#auto_increment_increment = 2
|
||||||
|
#auto_increment_offset = 1
|
||||||
|
#log_bin = /var/log/mysql/mariadb-bin
|
||||||
|
#log_bin_index = /var/log/mysql/mariadb-bin.index
|
||||||
|
# not fab for performance, but safer
|
||||||
|
#sync_binlog = 1
|
||||||
|
expire_logs_days = 10
|
||||||
|
max_binlog_size = 100M
|
||||||
|
# slaves
|
||||||
|
#relay_log = /var/log/mysql/relay-bin
|
||||||
|
#relay_log_index = /var/log/mysql/relay-bin.index
|
||||||
|
#relay_log_info_file = /var/log/mysql/relay-bin.info
|
||||||
|
#log_slave_updates
|
||||||
|
#read_only
|
||||||
|
#
|
||||||
|
# If applications support it, this stricter sql_mode prevents some
|
||||||
|
# mistakes like inserting invalid dates etc.
|
||||||
|
#sql_mode = NO_ENGINE_SUBSTITUTION,TRADITIONAL
|
||||||
|
#
|
||||||
|
# * InnoDB
|
||||||
|
#
|
||||||
|
# InnoDB is enabled by default with a 10MB datafile in /var/lib/mysql/.
|
||||||
|
# Read the manual for more InnoDB related options. There are many!
|
||||||
|
default_storage_engine = InnoDB
|
||||||
|
innodb_buffer_pool_size = 256M
|
||||||
|
innodb_log_buffer_size = 8M
|
||||||
|
innodb_file_per_table = 1
|
||||||
|
innodb_open_files = 400
|
||||||
|
innodb_io_capacity = 400
|
||||||
|
innodb_flush_method = O_DIRECT
|
||||||
|
#
|
||||||
|
# * Security Features
|
||||||
|
#
|
||||||
|
# Read the manual, too, if you want chroot!
|
||||||
|
# chroot = /var/lib/mysql/
|
||||||
|
#
|
||||||
|
# For generating SSL certificates I recommend the OpenSSL GUI "tinyca".
|
||||||
|
#
|
||||||
|
# ssl-ca=/etc/mysql/cacert.pem
|
||||||
|
# ssl-cert=/etc/mysql/server-cert.pem
|
||||||
|
# ssl-key=/etc/mysql/server-key.pem
|
||||||
|
|
||||||
|
#
|
||||||
|
# * Galera-related settings
|
||||||
|
#
|
||||||
|
[galera]
|
||||||
|
# Mandatory settings
|
||||||
|
#wsrep_on=ON
|
||||||
|
#wsrep_provider=
|
||||||
|
#wsrep_cluster_address=
|
||||||
|
#binlog_format=row
|
||||||
|
#default_storage_engine=InnoDB
|
||||||
|
#innodb_autoinc_lock_mode=2
|
||||||
|
#
|
||||||
|
# Allow server to accept connections on all interfaces.
|
||||||
|
#
|
||||||
|
#bind-address=0.0.0.0
|
||||||
|
#
|
||||||
|
# Optional setting
|
||||||
|
#wsrep_slave_threads=1
|
||||||
|
#innodb_flush_log_at_trx_commit=0
|
||||||
|
|
||||||
|
[mysqldump]
|
||||||
|
quick
|
||||||
|
quote-names
|
||||||
|
max_allowed_packet = 16M
|
||||||
|
|
||||||
|
[mysql]
|
||||||
|
default-character-set = utf8mb4
|
||||||
|
no-auto-rehash # faster start of mysql but no tab completion
|
||||||
|
|
||||||
|
[isamchk]
|
||||||
|
key_buffer = 16M
|
||||||
|
|
||||||
|
#
|
||||||
|
# * IMPORTANT: Additional settings that can override those from this file!
|
||||||
|
# The files must end with '.cnf', otherwise they'll be ignored.
|
||||||
|
#
|
||||||
|
!includedir /etc/mysql/conf.d/
|
||||||
57
config/nginx/nginx.conf
Normal file
57
config/nginx/nginx.conf
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
events {}
|
||||||
|
|
||||||
|
http {
|
||||||
|
server {
|
||||||
|
server_name localhost;
|
||||||
|
root /var/www/public;
|
||||||
|
index index.php index.html index.htm;
|
||||||
|
listen 80;
|
||||||
|
|
||||||
|
include /etc/nginx/mime.types;
|
||||||
|
default_type application/octet-stream;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.php?$query_string;
|
||||||
|
}
|
||||||
|
|
||||||
|
# PHP-FPM Configuration Nginx
|
||||||
|
location ~ \.php$ {
|
||||||
|
try_files $uri = 404;
|
||||||
|
fastcgi_split_path_info ^(.+\.php)(/.+)$;
|
||||||
|
fastcgi_pass php:9000;
|
||||||
|
fastcgi_index index.php;
|
||||||
|
include fastcgi_params;
|
||||||
|
fastcgi_param REQUEST_URI $request_uri;
|
||||||
|
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
|
||||||
|
fastcgi_param PATH_INFO $fastcgi_path_info;
|
||||||
|
}
|
||||||
|
|
||||||
|
# server {
|
||||||
|
# server_name localhost;
|
||||||
|
|
||||||
|
# listen 443 ssl;
|
||||||
|
# fastcgi_param HTTPS on;
|
||||||
|
|
||||||
|
# ssl_certificate /etc/ssl/server.pem;
|
||||||
|
# ssl_certificate_key /etc/ssl/server.key;
|
||||||
|
# ssl_protocols TLSv1.3;
|
||||||
|
|
||||||
|
# index index.php index.html;
|
||||||
|
# error_log /var/log/nginx/error.log;
|
||||||
|
# access_log /var/log/nginx/access.log;
|
||||||
|
# root /var/www/html/public;
|
||||||
|
|
||||||
|
# location ~ \.php$ {
|
||||||
|
# try_files $uri =404;
|
||||||
|
# fastcgi_split_path_info ^(.+\.php)(/.+)$;
|
||||||
|
# fastcgi_pass php:9000;
|
||||||
|
# fastcgi_index index.php;
|
||||||
|
# include fastcgi_params;
|
||||||
|
# fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
|
||||||
|
# fastcgi_param PATH_INFO $fastcgi_path_info;
|
||||||
|
# }
|
||||||
|
|
||||||
|
error_log /var/log/nginx/error.log;
|
||||||
|
access_log /var/log/nginx/access.log;
|
||||||
|
}
|
||||||
|
}
|
||||||
1944
config/php/php.ini
Normal file
1944
config/php/php.ini
Normal file
File diff suppressed because it is too large
Load Diff
1
db/.gitkeep
Normal file
1
db/.gitkeep
Normal file
@ -0,0 +1 @@
|
|||||||
|
# to keep dir db
|
||||||
47
docker-compose.yml
Normal file
47
docker-compose.yml
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
services:
|
||||||
|
|
||||||
|
nginx:
|
||||||
|
image: nginx:latest
|
||||||
|
container_name: nginx
|
||||||
|
restart: always
|
||||||
|
ports:
|
||||||
|
- 80:80
|
||||||
|
- 443:443
|
||||||
|
volumes:
|
||||||
|
- ./www/public:/var/www/public
|
||||||
|
- ./config/nginx/nginx.conf:/etc/nginx/nginx.conf
|
||||||
|
- ./config/ssl:/etc/ssl
|
||||||
|
depends_on:
|
||||||
|
- php
|
||||||
|
|
||||||
|
php:
|
||||||
|
build: ./docker/php
|
||||||
|
container_name: php
|
||||||
|
volumes:
|
||||||
|
- ./www:/var/www
|
||||||
|
- ./config/php/php.ini:/usr/local/etc/php/php.ini
|
||||||
|
|
||||||
|
mariadb:
|
||||||
|
image: mariadb:latest
|
||||||
|
container_name: mariadb
|
||||||
|
restart: always
|
||||||
|
volumes:
|
||||||
|
- ./db:/var/lib/mysql
|
||||||
|
- ./config/mysql/my.cnf:/etc/mysql/my.cnf
|
||||||
|
environment:
|
||||||
|
- MYSQL_ROOT_PASSWORD=12345
|
||||||
|
- MYSQL_DATABASE=db
|
||||||
|
- MYSQL_USER=pma
|
||||||
|
- MYSQL_PASSWORD=12345
|
||||||
|
|
||||||
|
phpmyadmin:
|
||||||
|
image: phpmyadmin/phpmyadmin:latest
|
||||||
|
container_name: pma
|
||||||
|
restart: always
|
||||||
|
environment:
|
||||||
|
PMA_HOST: mariadb
|
||||||
|
#PMA_ABSOLUTE_URI: http://localhost/pma/
|
||||||
|
ports:
|
||||||
|
- 8080:80
|
||||||
|
depends_on:
|
||||||
|
- mariadb
|
||||||
48
docker/php/Dockerfile
Normal file
48
docker/php/Dockerfile
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
FROM php:fpm
|
||||||
|
|
||||||
|
WORKDIR /var/www
|
||||||
|
|
||||||
|
RUN apt-get --allow-releaseinfo-change update && apt-get upgrade -y \
|
||||||
|
&& apt-get install -y \
|
||||||
|
g++ \
|
||||||
|
libbz2-dev \
|
||||||
|
libc-client-dev \
|
||||||
|
libcurl4-gnutls-dev \
|
||||||
|
libedit-dev \
|
||||||
|
libfreetype6-dev \
|
||||||
|
libicu-dev \
|
||||||
|
libjpeg62-turbo-dev \
|
||||||
|
libkrb5-dev \
|
||||||
|
libmcrypt-dev \
|
||||||
|
libpng-dev \
|
||||||
|
libsqlite3-dev \
|
||||||
|
libzip-dev \
|
||||||
|
wget \
|
||||||
|
unzip \
|
||||||
|
zlib1g-dev \
|
||||||
|
&& docker-php-ext-install -j$(nproc) \
|
||||||
|
mysqli \
|
||||||
|
pdo_mysql \
|
||||||
|
sockets \
|
||||||
|
&& docker-php-ext-configure gd --with-freetype --with-jpeg \
|
||||||
|
&& docker-php-ext-install -j$(nproc) gd \
|
||||||
|
&& docker-php-ext-configure zip \
|
||||||
|
&& docker-php-ext-install zip \
|
||||||
|
&& docker-php-source delete \
|
||||||
|
&& apt-get remove -y g++ wget \
|
||||||
|
&& apt-get autoremove --purge -y && apt-get autoclean -y && apt-get clean -y \
|
||||||
|
&& rm -rf /var/lib/apt/lists/* \
|
||||||
|
&& rm -rf /tmp/* /var/tmp/*
|
||||||
|
|
||||||
|
# Add user
|
||||||
|
RUN groupadd -g 1000 www
|
||||||
|
RUN useradd -u 1000 -ms /bin/bash -g www www
|
||||||
|
|
||||||
|
# Copy existing application directory contents
|
||||||
|
COPY ./ /var/www
|
||||||
|
|
||||||
|
# Copy existing application directory permissions
|
||||||
|
COPY --chown=www:www ./ /var/www
|
||||||
|
|
||||||
|
# Change current user to www
|
||||||
|
USER www
|
||||||
34
www/public/M0/01/evaluate.php
Normal file
34
www/public/M0/01/evaluate.php
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head lang="sv"></head>
|
||||||
|
<body>
|
||||||
|
<h1>Matematiktest</h1>
|
||||||
|
<h2>Resultat</h2>
|
||||||
|
<?php
|
||||||
|
$ans1 = $_POST['q1'];
|
||||||
|
$ans2 = $_POST['q2'];
|
||||||
|
$ans3 = $_POST['q3'];
|
||||||
|
$ans4 = $_POST['q4'];
|
||||||
|
$ans5 = $_POST['q5'];
|
||||||
|
$points = 0;
|
||||||
|
|
||||||
|
if($ans1 == 9)
|
||||||
|
$points++;
|
||||||
|
if($ans2 == 15)
|
||||||
|
$points++;
|
||||||
|
if($ans3 == -2)
|
||||||
|
$points++;
|
||||||
|
if($ans4 == 5)
|
||||||
|
$points++;
|
||||||
|
if($ans5 == 56)
|
||||||
|
$points++;
|
||||||
|
|
||||||
|
echo("<p>Du fick " . $points . " av 5 möjliga</p>");
|
||||||
|
echo("<p> Ans01: " . $ans1 . "; ans02: " . $ans2);
|
||||||
|
|
||||||
|
?>
|
||||||
|
<form action="index.html">
|
||||||
|
<input type="submit" value="Go Back">
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
28
www/public/M0/01/index.html
Normal file
28
www/public/M0/01/index.html
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head lang="sv"></head>
|
||||||
|
<body>
|
||||||
|
<h1>Matematik-test</h1>
|
||||||
|
<form action="evaluate.php" method="post">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Frågor</legend>
|
||||||
|
<label>4 + 5 = </label>
|
||||||
|
<input type="text" name="q1">
|
||||||
|
<br>
|
||||||
|
<label>3 x 5 = </label>
|
||||||
|
<input type="text" name="q2">
|
||||||
|
<br>
|
||||||
|
<label>3 - 5 = </label>
|
||||||
|
<input type="text" name="q3">
|
||||||
|
<br>
|
||||||
|
<label>15 / 3 = </label>
|
||||||
|
<input type="text" name="q4">
|
||||||
|
<br>
|
||||||
|
<label>7 x 8 = </label>
|
||||||
|
<input type="text" name="q5">
|
||||||
|
<br>
|
||||||
|
<input type="submit" value="Evaluate">
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
www/public/M0/02/evaluate.php
Normal file
34
www/public/M0/02/evaluate.php
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head lang="sv"></head>
|
||||||
|
<body>
|
||||||
|
<h1>Matematiktest</h1>
|
||||||
|
<h2>Resultat</h2>
|
||||||
|
<?php
|
||||||
|
$name = $_POST['name'];
|
||||||
|
$ans1 = $_POST['q1'];
|
||||||
|
$ans2 = $_POST['q2'];
|
||||||
|
$ans3 = $_POST['q3'];
|
||||||
|
$ans4 = $_POST['q4'];
|
||||||
|
$ans5 = $_POST['q5'];
|
||||||
|
$points = 0;
|
||||||
|
|
||||||
|
if($ans1 == 9)
|
||||||
|
$points++;
|
||||||
|
if($ans2 == 15)
|
||||||
|
$points++;
|
||||||
|
if($ans3 == -2)
|
||||||
|
$points++;
|
||||||
|
if($ans4 == 5)
|
||||||
|
$points++;
|
||||||
|
if($ans5 == 56)
|
||||||
|
$points++;
|
||||||
|
|
||||||
|
echo("<p>" . $name . " fick " . $points . " av 5 möjliga poäng</p>");
|
||||||
|
|
||||||
|
?>
|
||||||
|
<form action="index.html">
|
||||||
|
<input type="submit" value="Go Back">
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
www/public/M0/02/index.html
Normal file
30
www/public/M0/02/index.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head lang="sv"></head>
|
||||||
|
<body>
|
||||||
|
<h1>Matematik-test</h1>
|
||||||
|
<form action="evaluate.php" method="post">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Name</legend>
|
||||||
|
<input type="text" name="name">
|
||||||
|
<legend>Frågor</legend>
|
||||||
|
<label>4 + 5 = </label>
|
||||||
|
<input type="text" name="q1">
|
||||||
|
<br>
|
||||||
|
<label>3 x 5 = </label>
|
||||||
|
<input type="text" name="q2">
|
||||||
|
<br>
|
||||||
|
<label>3 - 5 = </label>
|
||||||
|
<input type="text" name="q3">
|
||||||
|
<br>
|
||||||
|
<label>15 / 3 = </label>
|
||||||
|
<input type="text" name="q4">
|
||||||
|
<br>
|
||||||
|
<label>7 x 8 = </label>
|
||||||
|
<input type="text" name="q5">
|
||||||
|
<br>
|
||||||
|
<input type="submit" value="Evaluate">
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
85
www/public/M0/03/css/gridCSS.css
Normal file
85
www/public/M0/03/css/gridCSS.css
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
main{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
grid-auto-rows: minmax(100px, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
grid-auto-flow: dense;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MOBILE */
|
||||||
|
.col-1 {grid-column: span 1;}
|
||||||
|
.col-2 {grid-column: span 2;}
|
||||||
|
.col-3 {grid-column: span 3;}
|
||||||
|
.col-4 {grid-column: span 4;}
|
||||||
|
.col-5 {grid-column: span 5;}
|
||||||
|
.col-6 {grid-column: span 6;}
|
||||||
|
|
||||||
|
.row-2{grid-row: span 2;}
|
||||||
|
.row-3{grid-row: span 3;}
|
||||||
|
.row-4{grid-row: span 4;}
|
||||||
|
.row-5{grid-row: span 5;}
|
||||||
|
|
||||||
|
|
||||||
|
main section {
|
||||||
|
grid-column: span 6; /* Default för mobil. Upptar hela bredden. */
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/** Tablets */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
[class*='col-t-'] { /* Reset av row-span*/
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-t-1 {grid-column: span 1;}
|
||||||
|
.col-t-2 {grid-column: span 2;}
|
||||||
|
.col-t-3 {grid-column: span 3;}
|
||||||
|
.col-t-4 {grid-column: span 4;}
|
||||||
|
.col-t-5 {grid-column: span 5;}
|
||||||
|
.col-t-6 {grid-column: span 6;}
|
||||||
|
|
||||||
|
.row-t-2{grid-row: span 2;}
|
||||||
|
.row-t-3{grid-row: span 3;}
|
||||||
|
.row-t-4{grid-row: span 4;}
|
||||||
|
.row-t-5{grid-row: span 5;}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** desktop */
|
||||||
|
@media (min-width: 980px) {
|
||||||
|
[class*='col-d-'] { /* Reset av row-span*/
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-d-1 {grid-column: span 1;}
|
||||||
|
.col-d-2 {grid-column: span 2;}
|
||||||
|
.col-d-3 {grid-column: span 3;}
|
||||||
|
.col-d-4 {grid-column: span 4;}
|
||||||
|
.col-d-5 {grid-column: span 5;}
|
||||||
|
.col-d-6 {grid-column: span 6;}
|
||||||
|
|
||||||
|
.row-d-2{grid-row: span 2;}
|
||||||
|
.row-d-3{grid-row: span 3;}
|
||||||
|
.row-d-4{grid-row: span 4;}
|
||||||
|
.row-d-5{grid-row: span 5;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/** Large desktop */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
[class*='col-w-'] { /* Reset av row-span*/
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-w-1 {grid-column: span 1;}
|
||||||
|
.col-w-2 {grid-column: span 2;}
|
||||||
|
.col-w-3 {grid-column: span 3;}
|
||||||
|
.col-w-4 {grid-column: span 4;}
|
||||||
|
.col-w-5 {grid-column: span 5;}
|
||||||
|
.col-w-6 {grid-column: span 6;}
|
||||||
|
|
||||||
|
.row-w-2{grid-row: span 2;}
|
||||||
|
.row-w-3{grid-row: span 3;}
|
||||||
|
.row-w-4{grid-row: span 4;}
|
||||||
|
.row-w-5{grid-row: span 5;}
|
||||||
|
}
|
||||||
171
www/public/M0/03/css/styleSheet.css
Normal file
171
www/public/M0/03/css/styleSheet.css
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-family: Arial, Verdana, sans-serif;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: black;
|
||||||
|
padding: 1rem;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 2.6rem;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h2 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: grey;
|
||||||
|
margin-left: 1.4rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background-color: black;
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topMenuButton{
|
||||||
|
float: right;
|
||||||
|
padding: 0.5rem 0.8rem 0.5rem 0.8rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
border: 0.1rem solid grey;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover#topMenuButton{
|
||||||
|
background-color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul, nav:active ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav:hover ul {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li{
|
||||||
|
display: block;
|
||||||
|
list-style-type: none;
|
||||||
|
color: white;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
nav ul li a {
|
||||||
|
display: block;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
nav ul li a:hover {
|
||||||
|
background-color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
section h2{
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
section p{
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.right {
|
||||||
|
float:right;
|
||||||
|
margin-right: 2rem;
|
||||||
|
width: 230px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.green{
|
||||||
|
background-color: #5cb85c;
|
||||||
|
border: 0.1rem solid green;
|
||||||
|
}
|
||||||
|
section.red{
|
||||||
|
background-color: #d9534f;
|
||||||
|
border: 0.1rem solid red;
|
||||||
|
}
|
||||||
|
section.blue{
|
||||||
|
background-color: #428bca;
|
||||||
|
border: 0.1rem solid blue;
|
||||||
|
}
|
||||||
|
section.yellow{
|
||||||
|
background-color: #f6ec50;
|
||||||
|
border: 0.1rem solid olive;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.silver{
|
||||||
|
background-color: silver;
|
||||||
|
border: 0.1rem solid grey;
|
||||||
|
}
|
||||||
|
section.orange{
|
||||||
|
background-color: #f0ad4e;
|
||||||
|
border: 0.1rem solid orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: black;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-top: 0.7rem;
|
||||||
|
color: white;
|
||||||
|
min-height: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/** Tablets */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
#topMenuButton {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul, nav:active ul {
|
||||||
|
display:block;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a {
|
||||||
|
border: 0.1rem solid grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a:hover {
|
||||||
|
background-color: grey
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** desktop */
|
||||||
|
@media (min-width: 980px){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Large desktop */
|
||||||
|
@media (min-width: 1200px){
|
||||||
|
|
||||||
|
}
|
||||||
BIN
www/public/M0/03/img/htmlcss.png
Normal file
BIN
www/public/M0/03/img/htmlcss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
3
www/public/M0/03/inc/footer.html
Normal file
3
www/public/M0/03/inc/footer.html
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<footer>
|
||||||
|
<p>Webbutveckling 11,CSS</p>
|
||||||
|
</footer>
|
||||||
16
www/public/M0/03/inc/header.html
Normal file
16
www/public/M0/03/inc/header.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<header>
|
||||||
|
<h1>Webbutveckling 11</h1>
|
||||||
|
<h2>- Responsiv Webbdesign</h2>
|
||||||
|
<nav id="topNav">
|
||||||
|
<a id="topMenuButton" href="#">☰</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Hem</a></li>
|
||||||
|
<li><a href="#">HTML</a></li>
|
||||||
|
<li><a href="#">CSS</a></li>
|
||||||
|
<li><a href="#">Responsiv Webbdesign</a></li>
|
||||||
|
<li><a href="#">Mobile First</a></li>
|
||||||
|
<li><a href="#">Desktop First</a></li>
|
||||||
|
<li><a href="#">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
51
www/public/M0/03/index.php
Normal file
51
www/public/M0/03/index.php
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Responsiv webbdesign</title>
|
||||||
|
<link rel="stylesheet" href="css/styleSheet.css?v=1.0">
|
||||||
|
<link rel="stylesheet" href="css/gridCSS.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php include("inc/header.html");?>
|
||||||
|
<main>
|
||||||
|
<section class="col-6 col-t-3 col-d-4 col-w-4 red">
|
||||||
|
<h2>Lär dig webbutveckling på ett enkelt sätt</h2>
|
||||||
|
<p>Denna webbplats är tänkt som en resurs till kursen Webbutveckling 1.
|
||||||
|
Tanken är att alla bidrar med sina kunskaper och erfarenheter.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="col-6 col-t-4 row-t-2 col-d-2 row-d-2 col-w-2 row-w-3 silver">
|
||||||
|
<h2>Responsiv Webbdesign</h2>
|
||||||
|
<p>Denna webbplats är tänkt som en resurs till kursen Webbutveckling 1.</p>
|
||||||
|
<p>Tanken är att alla bidrar med sina kunskaper och erfarenheter.</p>
|
||||||
|
<img src="img/htmlcss.png" alt="Logga" class="right">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="col-6 col-t-3 col-d-4 col-w-2 blue">
|
||||||
|
<h2>HTML</h2>
|
||||||
|
<p>Lär dig grundernai html på endast 55 minuter!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="col-6 col-t-2 col-d-2 col-w-2 yellow">
|
||||||
|
<h2>CSS</h2>
|
||||||
|
<p>CSS på 2 x 60 minuter!</p>
|
||||||
|
<p>Vi går igenom de vanligaste css-reglerna för att sedan fördjupa oss i animation med css.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="col-6 col-t-2 col-d-2 col-w-4 green">
|
||||||
|
<h2>Mobile First</h2>
|
||||||
|
<p>Gör din webbplats tillgänglig för alla med fokus på mobilaenheter.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="col-6 col-t-6 col-d-2 col-w-6 orange">
|
||||||
|
<h2>Desktop First</h2>
|
||||||
|
<p>Gör din webbplats tillgänglig för alla med fokus på stora högupplösta skärmar.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php include("inc/footer.html");?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
www/public/M1/index.php
Normal file
11
www/public/M1/index.php
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>M1-test</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php echo "Hello world"?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
14
www/public/index.php
Normal file
14
www/public/index.php
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>WebServ</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Webbservern fungerar!</h1>
|
||||||
|
<?php
|
||||||
|
echo "<h1>This is index. Try Mx </h1>"
|
||||||
|
?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user