Webbutvecklingsdagbok (Webbutveckling, 120 hp)

[DEL 4 AV 4]: Källkod till PHP Moment 4 (skapa mapparna "css", "include" och "class" inuti "include" och kör sedan "install.php" och sedan "index.php"):

p-moment4-new-blogposts.php

<?php include("include/config.php");?>
<?php $currentBtnAdmin=2; $currentBtn=7; // Mark current page in <nav> (see c-nav.php) & Moment 4 nav 

?>
<title><?php
if(isLoggedIn()){
    echo pageTitle("Moment 4 - " . strval($_SESSION['username']) . " inloggad");
}else {
    echo pageTitle("Moment 4 - Ej inloggad");}?>
  </title>
<?php include("include/c-header.php");?>
<?php include("include/c-nav.php");?>

<h2 id="specialh2">Moment 4 - Dataanslutningar med PHP | <?php echo isLoggedIn() ? strval($_SESSION['username']) . " inloggad" : " Ej inloggad" ?></h2>
<div class="uppgifts-div" id="special1">

<form action="p-moment4-logout.php" method="POST" id="logoutBtnSection">
    <?php
    // Show success message after succeeding logging in
    showSessionSuccess('loginSuccess','Du är nu inloggad!');
    // Show failure message when trying to logout without using log out button
    showSessionError('logOutWithoutBtn','Logga ut med Logga ut-knappen!');
    
     ?>
     <span style="font-size: 0.8rem;"><?php 
     if(isLoggedIn()){ // Show username if logged in
        echo "Inloggad: " . strval($_SESSION['username']);
     } else { // Else show info that you are not logged in
        echo "Ej inloggad";
     }
     ?> </span>
     <?php  // If logged in then show button for log out
     if(isLoggedIn()){
         ?>
    <input type="submit" name="loginOut" value="Logga ut" id="logoutBtn">
    <?php } else { // Otherwise, show links to login or register
        ?>
        <a class="backA" style="color: #1bbb85;" href="p-moment4-login.php">Inloggning</a>
        <a class="backA" style="color: #1bbb85;" href="p-moment4-register.php">Registrera</a>
    <?php }?>
</form>

 <ul id="nav-ul2">
 <li class="menu-btn2 <?php echo setCurrentBtnAdmin(1);?>">
 <a href="p-moment4.php">Startsida</a></li>
 <li class="menu-btn2 <?php echo setCurrentBtnAdmin(2);?>">
 <a href="p-moment4-new-blogposts.php">Nya inlägg</a></li>

 <?php if(isLoggedIn()){ ?>
 <li class="menu-btn2 <?php echo setCurrentBtnAdmin(3);?>">
 <a href="p-moment4-manage-blogposts.php">Hantera inlägg</a>
</li>
<?php }?>
</ul>

<?php showSessionError('id-error','Du kan inte visa inget inlägg!');?>

<hr>
<h3 style="margin-top:10px;">Nya blogginlägg</h3>
<?php
// Retrieve the two latest published blog posts
$currentBlogposts = $DB->getAllBlogPosts("");
// and check if 0 blog posts exist by checking length of array
if(count($currentBlogposts) == 0){
    // If zero blog posts exist, echo info about that
    echo showError('Inga blogginlägg finns!');
} 
    // If blogposts do exist, output them with foreach()
    // substr() is used to only show YYYY-MM-DD HH:MM by removing :SS(seconds)
    // mb_substr() only shows first 200 characters of each blog post
else {
    foreach($currentBlogposts as $blogpost){
        ?> 
        <h4 style="margin-top:20px;"><?= htmlspecialchars($blogpost['blogpost_title'], ENT_QUOTES, 'UTF-8');?></h4>
        <p style="font-size:0.9rem; font-weight:bold; margin-bottom:5px;"><?= "Postad: " . blogPublishDate($blogpost['blogpost_created']) . $blogpost['blogpost_created_by'];?></p>
        <p style="font-size:1rem;"><?php 
        // Only cut length of blogpost and add ... when over 200 characters long
        if(mb_strlen(htmlspecialchars($blogpost['blogpost_text'],ENT_QUOTES, 'UTF-8')) > 200){
        echo mb_substr(htmlspecialchars($blogpost['blogpost_text'], ENT_QUOTES, 'UTF-8'),0,200) . "...";
        } else { echo htmlspecialchars($blogpost['blogpost_text'], ENT_QUOTES, 'UTF-8');} ?></p>
        <p style="text-align:right;">
            <a class="backA" style="color: #1bbb85;" href="p-moment4-view-blogpost.php?id=<?=$blogpost['id'];?>">Läs mer</a></p>            
        <?php
    }
}
 ?>
<hr>

</div>

<?php include("include/secret.php")?>
<?php include("include/c-footer.php");?>

p-moment4-register.php

<?php include("include/config.php");
                // WHEN REGISTER SUCCEEDS!
                    // Clicked on Registrera?
                    if(clickedP('register')){
                        // Check the following first, all must be TRUE
                        if(
                            // Valid Username Length    
                            Validate::validUsernameLength($_POST['RegisterUsername']) 
                            // Valid Username Type
                            && Validate::validUsernameType($_POST['RegisterUsername']) 
                            // Valid Email
                            && Validate::isEmail($_POST['RegisterEmail'])
                            // Both Password Fields are same
                            && Validate::IsTwoSame($_POST['RegisterPass'],$_POST['RegisterPassCheck'])
                            // Both Password Fields are valid
                            && Validate::validPassword($_POST['RegisterPass'])
                            && Validate::validPassword($_POST['RegisterPassCheck'])
                            // Username doesn't already exist
                            && !$DB->userAlreadyExist($_POST['RegisterUsername'])
                            // Email doesn't already exist
                            && !$DB->emailAlreadyExist($_POST['RegisterEmail'])
                        ) // Iff All of  Above is TRUE then and only then...
                        { // Register new user in database
                            if($DB->registerUser($_POST['RegisterUsername'],$_POST['RegisterEmail'],$_POST['RegisterPass'])){
      // Set Session so user is taken to login page after registration
      $_SESSION['registerSuccess'] = 1;}}}
// Check if user registered and then send them to login page
if(isset($_SESSION['registerSuccess'])){ header("Location: p-moment4-login.php");}?>
<?php $currentBtn=7; // Mark current page in <nav> (see c-nav.php)?>
<title><?= pageTitle("Moment 4 - Registrera dig först!"); ?></title>
<?php include("include/c-header.php");?>
<?php include("include/c-nav.php");?>

<h2 id="specialh2">Moment 4 - Dataanslutningar med PHP | Registrering</h2>
<div class="uppgifts-div" id="special1">
<h3 style="text-align: left;">Registrera dig</h3>
<form id="form3" action="p-moment4-register.php" method="POST">
        <div class="login-rows2">
            <div class="login-parts">
                <input id="dataRegisterName" class="login-fields fieldListen" type="text" 
                name="RegisterUsername" value="<?php echo previousFieldvalueP('register','RegisterUsername'); ?>">
                <label for="dataRegisterName">Användarnamn</label>
                <?php 
                // Demanding to fill out empty field
                fillOutEmptyFieldP("register","RegisterUsername","Ange ett användarnamn");

                // Clicked on Registrera?
                if(clickedP('register')){

                // If string length of Username is not zero but is not at least 6 characters long or more than 21 characters
                if(strlen($_POST['RegisterUsername']) != 0 && !Validate::validUsernameLength($_POST['RegisterUsername'])){
                        // Then show error on how to fix
                        echo showError("Användarnamn ska vara mellan 6 och 21 tecken långt.");
                    }
               // If string of username is not zero but contains forbidden characters
               if(strlen($_POST['RegisterUsername']) != 0 && !Validate::validUsernameType($_POST['RegisterUsername'])){
                        // Then show error on how to fix
                        echo showError("Användarnamn får endast innehålla små bokstäver av a-z.");
                    }

                    // If Username is already in use in database
                    if(strlen($_POST['RegisterUsername']) != 0 && $DB->userAlreadyExist($_POST['RegisterUsername'])){
                        // Then show error on how to fix
                        echo showError("Användarnamnet används redan. Välj ett annat!");
                    }

                if(Validate::validUsernameLength($_POST['RegisterUsername']) && Validate::validUsernameType($_POST['RegisterUsername']) && !$DB->userAlreadyExist($_POST['RegisterUsername'])){
                    echo showSuccess("Användarnamn är ledigt och giltigt.");
                }

            }
                ?>
                
            </div>
            <div class="login-parts">
                <input id="dataRegisterEmail" class="login-fields fieldListen" type="text" 
                name="RegisterEmail" value="<?php echo previousFieldvalueP('register','RegisterEmail'); ?>">
                <label for="dataRegisterEmail">E-post</label>
                <?php 
                // Demanding to fill out empty field
                fillOutEmptyFieldP("register","RegisterEmail","Ange en giltig e-postadress först");

                // Clicked on Registrera?
                if(clickedP('register')){

                    // If string length of email is not 0 but is still invalid
                    if(strlen($_POST['RegisterEmail']) != 0 && !Validate::isEmail($_POST['RegisterEmail'])){
                        // Then show error on how to fix
                        echo showError("E-post ska vara i stil med: exempel@domän.se");
                    }

                    
                    // If Email is already in use in database
                    if(strlen($_POST['RegisterEmail']) != 0 && $DB->emailAlreadyExist($_POST['RegisterEmail'])){
                        // Then show error on how to fix
                        echo showError("E-postadressen används redan. Ange en annan!");
                    }

                    if(strlen($_POST['RegisterEmail']) != 0 && Validate::isEmail($_POST['RegisterEmail']) && !$DB->emailAlreadyExist($_POST['RegisterEmail'])){
                        echo showSuccess("E-postadressen är ledig och giltig.");
                    }
                }
                ?>
            </div>
            <div class="login-parts">
                <input id="dataLoginPass" class="login-fields fieldListen" type="password" 
                name="RegisterPass">
                <label for="dataLoginPass">Lösenord</label>
                <?php 
                // Demanding to fill out empty field
                fillOutEmptyFieldP("register","RegisterPass","Ange ett giltigt lösenord först");

                // Clicked on Registrera?
                if(clickedP('register')){

                    // If string length of Password (first field) is not zero but still invalid
                    if(strlen($_POST['RegisterPass']) != 0 && !Validate::validPassword($_POST['RegisterPass'])){

                        // Then show error on how to fix
                        echo showError("Lösenord ska vara mellan 12-24 tecken långt.<br>- Minst en siffra<br>- Minst en stor bokstav<br>- Minst en liten bokstav<br>- Minst ett specialtecken<br>- A-Z, 0-9 och specialtecknen _?!- får användas!");
                    }
                }
                ?>
            </div>
            <div class="login-parts">
                <input id="dataRegisterPassCheck" class="login-fields fieldListen" type="password" 
                name="RegisterPassCheck">
                <label for="dataRegisterPassCheck">Upprepa lösenord</label>
                <?php 
                // Demanding to fill out empty field
                fillOutEmptyFieldP("register","RegisterPassCheck","Ange ett upprepat giltigt lösenord först");

                // Clicked on Registrera?
                if(clickedP('register')){

                    // If both Passwords fields are not empty then...
                    if($_POST['RegisterPass'] != "" && $_POST['RegisterPassCheck'] != ""){
                    // ... check if both Password Fields do NOT contain same values...
                    if(!Validate::IsTwoSame($_POST['RegisterPass'],$_POST['RegisterPassCheck'])){
                        // And Then show error on how to fix
                        echo showError("Både lösenordsfältet och upprepning ska vara lika.");
                    }} else if ($_POST['RegisterPassCheck'] != ""){
                        echo showError("Mata in samma giltiga lösenord här som ovan.");
                    }

                }


                ?>
            </div>

            <div style="display: flex; flex-direction: row; justify-content: space-between; width: 100%;">
            
                <input type="submit" name="register" value="Registrera" id="registerBtn">
                <p><a style="display:inline-block; line-height: 3;" class="backA" href="p-moment4.php">Logga in</a></p>
            </div>
            
        </div>
        <?php 
             
?>

    </form>
    
</div>

<?php include("include/secret.php")?>
<?php include("include/c-footer.php");?>

p-moment4-view-blogpost.php

<?php include("include/config.php");?>
<?php $currentBtnAdmin=0; $currentBtn=7; // Mark current page in <nav> (see c-nav.php)
    // Check if logged in, otherwise redirect to login page
    
    // Trying to access view-blogpost without an id
    if(!isset($_GET['id'])){
        $_SESSION['id-error'] = 1; // Set error message
        header("Location: p-moment4.php"); // to be shown on admin page
    }
    
?>
<title><?= pageTitle("Moment 4 - " . strval($_SESSION['username']) . " inloggad"); ?></title>
<?php include("include/c-header.php");?>
<?php include("include/c-nav.php");?>

<h2 id="specialh2">Moment 4 - Dataanslutningar med PHP | <?php echo isLoggedIn() ? strval($_SESSION['username']) . " inloggad" : " Ej inloggad" ?></h2>
<div class="uppgifts-div" id="special1">

<form action="p-moment4-logout.php" method="POST" id="logoutBtnSection">
    <?php
    showSessionSuccess('loginSuccess','Du är nu inloggad!');
    showSessionError('logOutWithoutBtn','Logga ut med Logga ut-knappen!');
    
     ?>
     <span style="font-size: 0.8rem;"><?php 
     if(isLoggedin()){
        echo "Inloggad: " . strval($_SESSION['username']);
     } else {
        echo "Ej inloggad";
     }
     ?> </span>
     <?php if(isLoggedIn()){ ?>
    <input type="submit" name="loginOut" value="Logga ut" id="logoutBtn">
    <?php } else {
        ?>
        <a class="backA" style="color: #1bbb85;" href="p-moment4-login.php">Inloggning</a>
        <a class="backA" style="color: #1bbb85;" href="p-moment4-register.php">Registrera</a>
    <?php }?>
</form>

 <ul id="nav-ul2">
 <li class="menu-btn2 <?php echo setCurrentBtnAdmin(1);?>">
 <a href="p-moment4.php">Startsida</a></li>
 <li class="menu-btn2 <?php echo setCurrentBtnAdmin(2);?>">
 <a href="p-moment4-new-blogposts.php">Nya inlägg</a></li>

 <?php if(isLoggedin()){ ?>
 <li class="menu-btn2 <?php echo setCurrentBtnAdmin(3);?>">
 <a href="p-moment4-manage-blogposts.php">Hantera inlägg</a>
</li>
<?php }?>
</ul>

<?php showSessionError('id-error','Du kan inte visa inget inlägg!');?>

<hr>
<?php

// Retrieve blog post by id
$currentBlogpost = $DB->getBlogPostById($_GET['id'],"");

// and check if 0 blog posts exist by checking length of array
if(count($currentBlogpost) == 0){
    // If zero blog posts exist, echo info about that
    echo "<p>Blogginlägget finns inte!</p>";
} 
    // If blogposts do exist, output them with foreach()
    // substr() is used to only show YYYY-MM-DD HH:MM by removing :SS(seconds)
    // CSS class "blogpost-feature" uses line-clamp 
else {
    foreach($currentBlogpost as $blogpost){
        ?> 
        <h3 style="margin-top:20px;"><?= htmlspecialchars($blogpost['blogpost_title'], ENT_QUOTES, 'UTF-8');?></h3>
        <p style="font-size:0.9rem; font-weight:bold; margin-bottom:5px;"><?= "Postad: " . blogPublishDate($blogpost['blogpost_created']) . $blogpost['blogpost_created_by'];?></p>
        <p style="font-size:1rem;"><?= htmlspecialchars($blogpost['blogpost_text'], ENT_QUOTES, 'UTF-8') ?></p>
        <p style="text-align:right;">
        
        <?php 
        // Only show the ability to edit a blogpost if allow editing a blogpost if correct user is logged in! Thus checking with blogposted_created_by from database!
        if(isset($_SESSION['username']))
        { 
            if($_SESSION['username'] === $blogpost['blogpost_created_by']){?>
            <a class="backA" style="color: #1bbb85;" href="p-moment4-edit-blogpost.php?editid=<?=$blogpost['id'];?>">Ändra inlägg</a></p>
        <?php }}
        
    }
}
 ?>

<hr>
</div>

<?php include("include/secret.php")?>
<?php include("include/c-footer.php");?>

p-moment4.php

<?php include("include/config.php");?>
<?php $currentBtnAdmin=1; $currentBtn=7; // Mark current page in <nav> (see c-nav.php) & Moment 4 nav

?>
<title><?php
if(isLoggedIn()){
    echo pageTitle("Moment 4 - " . strval($_SESSION['username']) . " inloggad");
}else {
    echo pageTitle("Moment 4 - Ej inloggad");}?>
  </title>
<?php include("include/c-header.php");?>
<?php include("include/c-nav.php");?>

<h2 id="specialh2">Moment 4 - Dataanslutningar med PHP | <?php echo isLoggedIn() ? strval($_SESSION['username']) . " inloggad" : " Ej inloggad" ?></h2>
<div class="uppgifts-div" id="special1">

<form action="p-moment4-logout.php" method="POST" id="logoutBtnSection">
    <?php
    showSessionSuccess('loginSuccess','Du är nu inloggad!');
    showSessionError('logOutWithoutBtn','Logga ut med Logga ut-knappen!');
    
     ?>
     <span style="font-size: 0.8rem;"><?php 
     if(isLoggedin()){ // Show logged in as 
        echo "Inloggad: " . strval($_SESSION['username']);
     } else { // Or not logged in
        echo "Ej inloggad";
     }
     ?> </span>
     <?php  // If logged in then show button for log out
     if(isLoggedIn()){
         ?>
    <input type="submit" name="loginOut" value="Logga ut" id="logoutBtn">
    <?php } else { // Otherwise, show links to login or register
        ?>
        <a class="backA" style="color: #1bbb85;" href="p-moment4-login.php">Inloggning</a>
        <a class="backA" style="color: #1bbb85;" href="p-moment4-register.php">Registrera</a>
    <?php }?>
</form>

 <ul id="nav-ul2">
 <li class="menu-btn2 <?php echo setCurrentBtnAdmin(1);?>">
 <a href="p-moment4.php">Startsida</a></li>
 <li class="menu-btn2 <?php echo setCurrentBtnAdmin(2);?>">
 <a href="p-moment4-new-blogposts.php">Nya inlägg</a></li>

 <?php if(isLoggedin()){ ?>
 <li class="menu-btn2 <?php // This button is only shown when logged in as it is administrative
    echo setCurrentBtnAdmin(3);?>">
 <a href="p-moment4-manage-blogposts.php">Hantera inlägg</a>
</li>
<?php }?>
</ul>

<?php showSessionError('id-error','Du kan inte visa inget inlägg!');?>

<hr>
<h3 style="margin-top:10px;">De 2 senaste blogginläggen</h3>
<?php
// Retrieve the two latest published blog posts
$currentBlogposts = $DB->get2LatestBlogPosts("");
// and check if 0 blog posts exist by checking length of array
if(count($currentBlogposts) == 0){
    // If zero blog posts exist, echo info about that
    echo showError('Inga blogginlägg finns!');
} 
    // If blogposts do exist, output them with foreach()
    // substr() is used to only show YYYY-MM-DD HH:MM by removing :SS(seconds)
    // mb_substr() only shows first 200 characters of each blog post
else {
    foreach($currentBlogposts as $blogpost){
        ?> 
        <h4 style="margin-top:20px;"><?= htmlspecialchars($blogpost['blogpost_title'], ENT_QUOTES, 'UTF-8');?></h4>
        <p style="font-size:0.9rem; font-weight:bold; margin-bottom:5px;"><?= "Postad: " . blogPublishDate($blogpost['blogpost_created']) . $blogpost['blogpost_created_by'];?></p>
        <p style="font-size:1rem;"><?php 
        // Only cut length of blogpost and add "..." when over 200 characters long
        if(mb_strlen(htmlspecialchars($blogpost['blogpost_text'], ENT_QUOTES, 'UTF-8')) > 200){
        echo mb_substr(htmlspecialchars($blogpost['blogpost_text'], ENT_QUOTES, 'UTF-8'),0,200) . "...";
        } else { echo htmlspecialchars($blogpost['blogpost_text'], ENT_QUOTES, 'UTF-8');} ?></p>
        <p style="text-align:right;">
        <a class="backA" style="color: #1bbb85;" href="p-moment4-view-blogpost.php?id=<?=$blogpost['id'];?>">Läs mer</a></p>
        <?php
    }
}
 ?>
<hr>

</div>

<?php include("include/secret.php")?>
<?php include("include/c-footer.php");?>

På återseende!

Mvh,
WKL.

I Webbutvecklingsprogrammet sedan PHP-kursen började (Webbutveckling II) så har vi lärt oss använda Git och GitHub och commitar till lärardelade GitHub Classrooms. Detta kommer vi att göra resten av utbildningen från och med den kursen.

Jag vill inte röja mitt GitHub-konto ännu bara!

Mvh,
WKL.

På populär begäran så finns Moment 4 nu i sin slutversion (den underhålls ej längre mao):
https://github.com/WebbkodsLarlingen/WKL_VT2023_DT093G-Moment...

Denna version är inte samma som den pågående projektversionen (vilket är en förbättrad och utökad version av Moment 4) vilket i sin tur släpps någon gång i mitten på mars i år.

Mvh,
WKL.

En halvny identitet - en komplett webbupplevelse snart nära dig om drygt en vecka!

Den slutgiltiga webbplatsen kommer att ha mer eller mindre 0 animeringar än överraskningen på startsidan. Ja, det blir fort tröttsamt för den som ej lagt ned tid på CSS-kodandet och man måste därför ofta "kill your own darlings" så att säga!

Mvh,
WKL.

Jag har nu lyckats implementera e-postaktivering där du aktiverar ditt registrerade konto med en aktiveringsnyckel:

Fråga till den som vet mer: Vad som förvirrar mig är hur session_start() fungerar. Varje php-sida börjar med att inkludera config.php-filen där session_start() alltid körs innan någon HTML-kod börjar renderas ut. Detta betyder då att alla övriga php-filer som inkluderar config.php bör få ta del av session_start().

Inuti config.php inkluderas en annan php med flitigt använda funktioner så är config-filen inte inkluderad så kommer webbsidan ifråga att krascha direkt på grund av försök att anropa icke-deklarerade funktioner och så vidare.

Så det är inte som om att jag skulle ha glömt att inkludera config-filen här och var. Vad jag tror det verkar vara är att session_start() verkar inte kunna "komma ihåg" lagrade $_SESSION['variabler']; mellan sidor när header("Location: sida.php"); används om man inte besökt sidan innan detta.

Exempelvis hamnar man på inloggningssidan efter utloggning men innan man ens kan logga ut så måste man först ha loggat in. Då har man alltså besökt logga in-sidan innan man loggade ut (vilket är en egen php-fil som bara sätter $_SESSION['variabel']; och sedan använder header("Location: inloggningssida.php");.

På inloggningsssidan har jag en funktion som kollar och skriver ut diverse fel- och rättmeddelanden och sedan unsettar $_SESSION['variabler'];. Detta fungerade inte med aktiveringen, det vill säga, du fick inget rättmeddelande om att du nu kan logga in efter att du har lyckats aktivera konto.

Det fungerar dock nu när jag satt en session_start() precis efter jag inkluderat config.php (som redan kört session_start()) och det är så förvirrande.

Här är koden:

1        // Try activating account with the class 'Activate'
2        if($Activate->activateAccount($user,$email,$key)){
3            // Prepare success message and send to login page
4            $_SESSION['registerSuccessB'] = 1;
5            header('Location: login.php');
6            // Otherwise Prepare fail message to show instead
7       } else { $_SESSION['registerFail'] = 1;}

Rad 7 förbereder att ett felmeddelande kan visas på samma sida utan problem med exakt samma funktion som också visar när något gick rätt. Jag provade först en session_start() inuti if-satsen innan rad 4 men det fungerade inte. utan jag behövde ha en session_start() direkt före denna if-sats för att det hela skulle fungera.

Detta är en av många "små detaljer" som jag inte snappat upp ännu inom PHP. Annan sak som förvirrar mig är att veta klassinstansers livscykler innan de får för sig att __destruct(); innan jag är färdiga med dem på en och samma php-sida. Hur vet en klass att den inte ska användas längre ned på sidan innan den får för sig att __destructa? 🤔

Exempelvis har det krånglat med klasser som ansluter till relationsdatabas via MySQLI-objektet vilket ibland fått för sig att stänga sin anslutning fast jag ville använda samma objekt/anslutning på flera ställen på samma php-sida.

Nåja, sistnämnda har jag redan mejlat lärarna om så!

Mvh,
WKL.

"Nostalgitrippen" (PHP-Projekt) släpps i Early Access! (allt klart förutom chattfunktion)
Du kan registrera dig (mejlaktivering med aktiveringsnyckel obligatoriskt) här: Nostalgitrippen Early Access

Funktioner:
- Begränsad RichEditor av blogginlägg (kan ju ses som "posts" också eftersom det hamnar i ett flöde på startsidan)
- Ladda upp en bild vid varje blogginlägg
- Ta bort/ändra inlägg eller bara dess bild
- Kommentera inlägg
- Radera konto helt
- Se topp 5 mest lästa / kommenterade inlägg
- Se alla registrerade och statistik över dem
- Trångt mobilutseende i all ära!

Imorgon blir jag färdig med chattfunktionen då inlämningsdatum för både projektrapport + projektuppgiften är söndag kl.23:59.

På återseende!

Mvh,
WKL.

P.S. Jag lämnade in Databasprojektet för cirka två dagar sedan och troligen får jag kompletteringskrav på grund av superpetig och/eller opedagogisk lärare.
---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
🚧(Pågående) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
🚧(Inväntar betyg/kompletteringskrav) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)

Databasers teckenkodning gav mig nästan magsjuka!
Jag är nu officiellt färdig med Webbutveckling II-projektuppgiftens webbplats:
http://studenter.miun.se/~maka2207/writeable/php-projekt/

Det finns en trevlig chatt där det går att skriva efter inloggning (dock kan man inte se vilka som är online, men det går att gå in på deras profil och se antal inlägg, kommentarer & chattmeddelanden).

Den uppdaterar chatten direkt när du skriver eller var 15:e sekund (så jag inte blir bannlyst från student-DB:n pga. för många DB-anrop! )

Det som återstår nu är Projektrapportskrivandet. Deadline imorgon kl.23:59 svensk tid!

Nu kör vi! 🫡

Mvh,
WKL.

Slutbetyg i Webbutveckling II
Med mycket stolt besked där jag tittar upp i taket med näsan när jag skriver detta så har jag äntligen fått slutbetyget i kursen "VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)":

Jag kommer att lägga upp ett separat repo - inom kort - för den som vill titta på det mycket förenklade "Lunarstorm" eller vad man ska kalla det för! Det finns en rätt rolig anledning till varför jag kallar läraren för "Mus-Läraren" men inget jag berättar öppet här.

GulpJS är klurigt
Den som vill kika på hur jag har gjort Gulpfile.js hittills i den ena senaste kursen (Webbutveckling III) så har jag källkoden här just nu:

/* Single GulpFile that runs task to automate boring web developing tasks */

// Using "require" to force certain JS modules to be included or stop running script if not found when included
const gulp = require('gulp');                           // The entire gulp module
const sass = require('gulp-sass')(require('node-sass'));// gulp plugin = converting SCSS to CSS files
const sourcemaps = require('gulp-sourcemaps');          // gulp plugin = see sources of SCSS files and not processed CSS files
const imagemin = require('gulp-imagemin');              // gulp plugin = compressing image files
const concat = require('gulp-concat');                  // gulp plugin = merging css/js files to single files
const cssnano = require('gulp-cssnano');                // gulp plugin = compressing CSS files
const terser = require('gulp-terser');                  // gulp plugin = compressing ES6+ JS files
const htmlmin = require('gulp-htmlmin');                // gulp plugin = compress html files
const browsersync = require('browser-sync').create();   // plugin = automatically update live-server, also create instance on declaration

// Variables for different folders with different kinds of files (html, scss/sass, css, js, images)
const files = {
    htmlFiles: "src/**/*.html",
    sassFiles: "src/sass/*.scss",
    cssFiles: "src/css/*.css",
    jsFiles: "src/js/*.js",
    imgFiles: "src/img/*"
}

/*  
    What different gulp.ACTION(s) - Does
    gulp.task   = Doing a certain task
    gulp.src    = What files to use for certain task(s)
    gulp.dest   = Folder to output files after doing certain task(s)
    gulp.watch  = Automatically applying certain task(s) if certain thing(s) happen to certain file(s)
*/

/* "OPTIMIZING" TASKS = Concat files into a single one (cannot with 
images) and/or compress files and put them in "publication folder" */

// Optimizing HTML files (compressing by removing whitespace and comments)
function optimizeHTML(){
    return gulp.src(files.htmlFiles) // Retrieve all HTML files
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('pub')); // And copy them over to the destination folder called 'pub'
}

// Optimizing image files (compressing)
function optimizeIMG(){
    return gulp.src(files.imgFiles) // get all image files
    .pipe(imagemin()) // compress images
    .pipe(gulp.dest('pub/img')); // output compressed images
}

// Optimizing CSS files (concat CSS files and then remove whitespace and comments from the single created CSS file)
function optimizeCSS(){
    return gulp.src(files.cssFiles) // get all css files
    .pipe(concat('styles.css')) // merge
    .pipe(cssnano()) // compress
    .pipe(gulp.dest('pub/css')); // output single file
}
// Optimizing JS files (concat JS files and then remove whitespace and comments from the single created JS file)
function optimizeJS(){
    return gulp.src(files.jsFiles) // get all js files
    .pipe(concat('main.js')) // merge
    .pipe(terser()) // compress
    .pipe(gulp.dest('pub/js')); // output single file
}

// Optimize SCSS/SASS files (convert them to CSS)
function optimizeSCSS() {
    return gulp.src(files.sassFiles) // get all SCSS files
        .pipe(sass().on("error", sass.logError)) // convert to CSS files
        .pipe(gulp.dest("src/css/")) // put this in CSS folder 
        .pipe(browsersync.stream()); // sync changes in live browser, and optimizeCSS will run next
}

// WATCH FILES TASKS
// Using Browsersync plugin - initiation
function browsersyncServe(cb){
    browsersync.init({
        server: {
            baseDir: './pub' // Where "GET" should try find index.html file
        }
    });
    cb(); // Tell Gulp that function is completed since Browersync is not innate Gulp plugin
}
// Using Browsersync plugin - reloading on change
function browsersyncReload(cb){
    browsersync.reload(); // Reload now
    cb(); // Tell Gulp that function is completed since Browersync is not innate Gulp plugin
}

// Watch and copy over changed files (UPDATED FOR MOMENT 2!)
function watchMainFiles() {
    // Watch HTML, SASS & JS Files
    gulp.watch(
        [ // We don't need to watch for changes in CSS files, only SASS files
            files.htmlFiles,
            files.sassFiles, 
            files.jsFiles,
        ],
        // And then run a series of tasks since SCSS must convert BEFORE it is allowed to concact & copy single CSS file!
        gulp.series(
            optimizeHTML, // Copy HTML files
            optimizeSCSS, // First convert SCSS files
            optimizeCSS, // And then concat & compress now converted-to CSS files
            optimizeJS, // Concat & compress JS files
            browsersyncReload) // Finally reload live browser
            );

     // Separate watch for image files since changes to that folder are rare and it takes the most time to run
    gulp.watch(files.imgFiles,gulp.series(optimizeIMG,browsersyncReload));
}

// DEFAULT = Runs when you just run command "gulp" in Terminal, runs a series of predefined tasks (one by one)
exports.default = gulp.series(
    // First optimize everything on first running command
    optimizeHTML,
    optimizeIMG,
    optimizeSCSS,
    optimizeCSS,
    optimizeJS,
    // Initiate Browsersync
    browsersyncServe,
    // Then start "watching" for changes
    watchMainFiles
);

Det kluriga är att köra uppgifterna i lämplig ordning och inte köra dem i onödan. Exempelvis har jag två separata gulp.watch() för de enklare filerna och en separat för bilderna. Bilder tar tid att behandla och är onödigt att behandla varje gång jag bara gjort skriftliga ändringar i textfilerna.

"Enligt" chatGPT-3 så är "best practice" att först konvertera alla SCSS-filer till CSS-filer och sedan slå ihop CSS-filer till en CSS-fil som sedan komprimeras och läggs i pub/css-mappen än att göra allt tvärtom. Tydligen ska det fungera bättre då med alla specialfunktioner som finns i SCSS: @extend, mixins: $variables:, och så vidare.

Om du ser något potentiellt förbättringsområde i min Gulpfile.js-fil så nämn gärna så jag får lära mig av de som redan arbetar i branschen och vet "branschpraxis" för jag kan bara gissa mig fram genom att fråga chatGPT-3!

Databaserkursen tar aldrig slut?!
Ingen i klassen på ca 40 personer just nu verkar ha fått tillbaka slutbetyg eller kompletteringskrav från Databaskursen trots att 10 arbetsdagar har gått. Om jag minns rätt så är det max 3 veckor innan man ska få återkoppling på sitt examinationsarbete i en vanlig universitetskurs?

Många fruktar nu irriterande kompletteringskrav då denna opedagogiska lärare har varit jobbig och krångligt ohjälpsam då läraren verkar ha upplevt misstänksamhet mot studenter som ställt frågor för att de verkar ha uppfattats av läraren som "Försök till att få svar på den kommande tentan". Nu var det förvisso ett inlämningsarbete och ingen (distans)tentamen.

Absolut inte bättre än D eller E i slutbetyg i denna kurs. Detta trots att jag skapat 3 Triggers, 3 Procedures, 3 Functions och 1 View som krävs för högre betyg (upp till C eller B beroende på hur komplexa dessa uppfattas av läraren). Jag upplever som sagt var att just denna lärare inte är så medgörlig till dialog för att få ut så mycket som möjligt av kursen. Läraren tycks vara mer mån om att inte "råka ge svaren på provet i förväg" om jag uttrycker det så.

För övrigt så var Databaskursen ögonöppnande som en introduktion till databasvärlden även om icke-relationsdatabaser verkar vara mer vanligt numera än gamla relationsdatabaser(?)!

På återseende!

Mvh,
WKL.

P.S. "Mus-Läraren" har inget med den påtända Jerryn i min avatar att göra! 🤣
P.S.S. Ja, det är Wordpress som används i kursen "Webbdesign för CMS".
---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
🚧(Inväntar slutbetyg/kompletteringskrav) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧(Pågår) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Pågår) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)

Utbildningens sämsta "pedagogiska lärare" ger mig ångest
Som spekulerat så fick jag och många andra i klassen tillbaka sina slutbetyg/kompletteringskrav från Databasläraren och förvånansvärt nog så var jag en av de få eller många (oklart ännu) som fick kompletteringskrav.

Återkopplingen ges i form av ett simpelt textdokument där det inte framgår om ändringar som ska göras i ER-diagrammet då också måste speglas i projektrapporten och/eller den faktiska databasimplementeringen (SQL-filerna):

(Jag har själv lagt till de tomma raderna för lättare läsbarhet annars så skrevs allt med inga utrymmen mellan meningarna/styckena.

Det jag vet och medger är att strecket upp som sedan har ett streck som i sin tur pekar med can_include är en fullösning rent grafiskt talat, men jag tänkte att det borde vara uppenbart nog att det är svaga entitetstyper (i och med dubbelrektanglar).

Till saken hör att jag håller ej med om att "number_of"-entiteterna inte kan vara egna entiteter då de är svaga entitetstyper i ER-diagrammet, alltså de kan bara existera om en "(stark) entitet" först finns. Jag klargjorde i min projektrapport att de är svaga entitetstyper för att vid första kontaktförsöket med företaget så lämnas inte nödvändigtvis all info om ett givet boende och därmed så vill man undvika null-värden genom att bara lägga till nya rader i andra tabeller som pekar mot ett särskilt boende (varav en svag entitetstyp).

Jag har mitt ER-diagram här nedan där vem som helst gärna får säga: "Jamen, läraren har ju rätt, du har gjort helt fel här" eller "Ja, det verkar hugget som stucket i val här":

Databasimplementeringen (SQL-skrivandet) och de obligatoriska SQL-frågorna har läraren ej kommenterat så de antar jag då är korrekt. En annan person som fått Fx har fått återkoppling om att förvandlingen från ER-diagrammet till Basrelationer är fel men jag har ej fått någon återkoppling om det eller att jag har gjort rätt så jag vet inte om jag ska tolka det som rätt då eller inte?

Databasimplemetering - skapade Tabeller utifrån ER-diagram:

/* Create Database if don't exist already and then Use it */
CREATE DATABASE IF NOT EXISTS dt003g_maka2207;
USE dt003g_maka2207;

/* Disable FK Checks so I can add tables in any order I want */
set foreign_key_checks=0;
/***************************************************
 CREATING TABLES AND SETTING PRIMARY + FOREIGN KEYS
***************************************************/

/* Type_of_Supplier = Om Leverantör är Privatperson ELLER Företag */
CREATE TABLE Type_of_Supplier (
  id INT NOT NULL AUTO_INCREMENT,
  Person_or_company VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

/* Supplier = Leverantör av Boenden */
CREATE TABLE Supplier (
  Supplier_id INT NOT NULL AUTO_INCREMENT,
  Type_of_Supplier INT NOT NULL DEFAULT 1,
  Supplier_first_name VARCHAR(255) NOT NULL,
  Supplier_last_name VARCHAR(255) DEFAULT "",
  PRIMARY KEY (Supplier_id),
  FOREIGN KEY (Type_of_Supplier) REFERENCES Type_of_Supplier(id) ON DELETE CASCADE
);

/* Supplier_Phone_number = Telefonnummer kopplade till en Leverantör */
CREATE TABLE Supplier_Phone (
Supplier INT NOT NULL,
Phone_number VARCHAR(20) NOT NULL DEFAULT "Nummer saknas",
PRIMARY KEY (Phone_number, Supplier),
FOREIGN KEY (Supplier) REFERENCES Supplier(Supplier_id) ON DELETE CASCADE
);

/* Supplier_Email = E-postadresser kopplade till en Leverantör */
CREATE TABLE Supplier_Email (
Supplier INT NOT NULL,
Email_address VARCHAR(255) NOT NULL DEFAULT "E-postadress saknas",
PRIMARY KEY (Email_address, Supplier),
FOREIGN KEY (Supplier) REFERENCES Supplier(Supplier_id) ON DELETE CASCADE
);

/* Type of Accommodation = Boendeform */
CREATE TABLE Type_of_Acc (
  id INT NOT NULL AUTO_INCREMENT,
  Accommodation_Type VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

/* Rent Status = When accommodation has been received in database but not reviewed 
        yet to change its status to either Rented(Uthyrd) or Available(Ledig)   */
CREATE TABLE Rent_Status (
  id INT NOT NULL AUTO_INCREMENT,
  Status_Type VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

/* Price Type = Kind of price for accommodation (Pris per dag, Pris per vecka, Pris per månad) */
CREATE TABLE Price_Type (
  id INT NOT NULL AUTO_INCREMENT,
  Price_type VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

/* Zipcode = Postnummer som berättar vilken ort(City) ett Boende ligger i */
CREATE TABLE Zipcode (
  Zipcode_number INT(5) NOT NULL UNIQUE,
  City VARCHAR(255) NOT NULL,
  CHECK (Zipcode_number >= 10000 AND Zipcode_number <= 98000),
  PRIMARY KEY (Zipcode_number)
);

/* Accommodation = Boende som Leverantör äger */
CREATE TABLE Accommodation (
  Acc_id INT NOT NULL AUTO_INCREMENT,
  Supplier INT NOT NULL,
  Zipcode INT(5) DEFAULT 98000,
  Street_name VARCHAR(255) DEFAULT "Ej angett",
  Street_number VARCHAR(64) DEFAULT "0",
  Type_Of_Acc INT NOT NULL DEFAULT 1,
  Rent_Status INT NOT NULL DEFAULT 1,
  Price_Type INT NOT NULL DEFAULT 1,
  Agreed_price DECIMAL(10,2) DEFAULT 0,
  Desired_price DECIMAL(10,2) DEFAULT 0,
  Total_area_kvm INT(10) DEFAULT 0,
  Added_date timestamp NOT NULL DEFAULT current_timestamp,
  Available_first DATE DEFAULT "1970-01-01",
  Other_information TEXT DEFAULT 'Ingen övrig info',
  PRIMARY KEY (Acc_id),
  FOREIGN KEY (Supplier) REFERENCES Supplier(Supplier_id) ON DELETE CASCADE,
  FOREIGN KEY (Type_Of_Acc) REFERENCES Type_of_Acc(id) ON DELETE CASCADE,
  FOREIGN KEY (Rent_Status) REFERENCES Rent_Status(id) ON DELETE CASCADE,
  FOREIGN KEY (Price_Type) REFERENCES Price_Type(id) ON DELETE CASCADE,
  FOREIGN KEY (Zipcode) REFERENCES Zipcode(Zipcode_number) ON DELETE CASCADE
);

/* Rental_Contracts = Hyreskontrakt förknippade med Boende */
CREATE TABLE Rental_Contracts (
  id_contract INT NOT NULL AUTO_INCREMENT,
  Accommodation INT NOT NULL,
  Start_date_contract DATE NOT NULL,
  End_date_contract DATE NOT NULL,
  Date_contract_signed DATE NOT NULL,
  PRIMARY KEY (id_contract),
  FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Om fullt möblerat ingår i ett Boende | 1 = Ja, 2 = Nej */
CREATE TABLE FurnitureStuff (
  Accommodation INT NOT NULL,
  Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
  Comment TEXT DEFAULT "Ingen kommentar",
  PRIMARY KEY (Accommodation),
  FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Om komplett sängutrustning ingår i ett Boende | 1 = Ja, 2 = Nej */
CREATE TABLE BeddingStuff (
Accommodation INT NOT NULL,
Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
Comment TEXT DEFAULT "Ingen kommentar",
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Om fullt utrustat kök ingår i ett Boende | 1 = Ja, 2 = Nej */
CREATE TABLE KitchenStuff (
Accommodation INT NOT NULL,
Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
Comment TEXT DEFAULT "Ingen kommentar",
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Om Internet (kabel eller WiFi) ingår i ett Boende | 1 = Ja, 2 = Nej */
CREATE TABLE Internet_Wifi (
Accommodation INT NOT NULL,
Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
Comment TEXT DEFAULT "Ingen kommentar",
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Om Värme, Vatten och/eller el ingår ingår i ett Boende | 1 = Ja, 2 = Nej */
CREATE TABLE HeatWaterElectricity (
Accommodation INT NOT NULL,
Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
Comment TEXT DEFAULT "Ingen kommentar",
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Om Tvättmaskin ingår i ett Boende | 1 = Ja, 2 = Nej */
CREATE TABLE WashingMachine (
Accommodation INT NOT NULL,
Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
Comment TEXT DEFAULT "Ingen kommentar",
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Om Torkskåp och/eller Torktumlare ingår i ett Boende | 1 = Ja, 2 = Nej */
CREATE TABLE Dryer (
Accommodation INT NOT NULL,
Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
Comment TEXT DEFAULT "Ingen kommentar",
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Om Sophämtning ingår i ett Boende | 1 = Ja, 2 = Nej */
CREATE TABLE GarbageCollection (
Accommodation INT NOT NULL,
Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
Comment TEXT DEFAULT "Ingen kommentar",
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Om Trädgårdsskötsel (gräsklippning och/eller snöskottning) 
   ingår i ett Boende | 1 = Ja, 2 = Nej */
CREATE TABLE Gardening_Snow (
Accommodation INT NOT NULL,
Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
Comment TEXT DEFAULT "Ingen kommentar",
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Antal rum i ett Boende */
CREATE TABLE NoRooms (
Accommodation INT NOT NULL,
number_of INT NOT NULL DEFAULT 0,
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Antal sovrum (detta säger dock inget om antalet sovplatsser/bäddar) i ett Boende */
CREATE TABLE NoBedrooms (
Accommodation INT NOT NULL,
number_of INT NOT NULL DEFAULT 0,
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Antal bäddar/sovplatser (de kan finnas i fler rum än endast sovrum!) i ett Boende */
CREATE TABLE NoBeds (
Accommodation INT NOT NULL,
number_of INT NOT NULL DEFAULT 0,
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Antal Vardagsrum i ett Boende */
CREATE TABLE NoLivingrooms (
Accommodation INT NOT NULL,
number_of INT NOT NULL DEFAULT 0,
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Antal Kök i ett Boende */
CREATE TABLE NoKitchens (
Accommodation INT NOT NULL,
number_of INT NOT NULL DEFAULT 0,
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Antal Toaletter (vissa toaletter kan vara utan duschar!) i ett Boende */
CREATE TABLE NoWCs (
Accommodation INT NOT NULL,
number_of INT NOT NULL DEFAULT 0,
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Antal Duschar i ett Boende */
CREATE TABLE NoShowers (
Accommodation INT NOT NULL,
number_of INT NOT NULL DEFAULT 0,
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* Antal Parkeringar i ett Boende */
CREATE TABLE NoParkingSpots (
Accommodation INT NOT NULL,
number_of INT NOT NULL DEFAULT 0,
PRIMARY KEY (Accommodation),
FOREIGN KEY (Accommodation) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE
);

/* DATABASRELATERADE TABELLER */
 -- Spara raderade Accommodation-rader
 CREATE TABLE Deleted_Acc_Rows
  (
    id int NOT NULL AUTO_INCREMENT,
    table_name VARCHAR(255) NOT NULL,
    deleted_id INT NOT NULL,
    deleted_data TEXT NOT NULL,
    delete_timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
  );
 -- Spara raderade Leverantörers Telefonnummer-rader
   CREATE TABLE Deleted_Phone_Rows
  (
    id int NOT NULL AUTO_INCREMENT,
    table_name VARCHAR(255) NOT NULL,
    deleted_id INT NOT NULL,
    deleted_data TEXT NOT NULL,
    delete_timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
  );

   -- Spara raderade Kontrakt-rader
   CREATE TABLE Deleted_Contracts_Rows
  (
    id int NOT NULL AUTO_INCREMENT,
    table_name VARCHAR(255) NOT NULL,
    deleted_id INT NOT NULL,
    deleted_data TEXT NOT NULL,
    delete_timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
  );

/* Enable FK Checks for Reference Integrity again */
set foreign_key_checks=1;

Jag vill bara bli klar med denna kurs. Resten går att lära sig genom TRIAL & ERROR. Det känns just nu som om det är den värsta läraren jag har varit med om i mitt liv. En slags "idiotförklarande ton" i allt prat och i all skrift är hur jag tolkar så kallade "dialoger" med denna lärare som.

Att fråga läraren känns kluvigt eftersom då kan det bli snack om att "Jag försöker få svar på tentamen" från lärarens perspektiv.

Jag måste tyvärr säga det men jag nästan "avskyr" denna lärare i sättet personen opedagogiskt kommunicerar vad denna vill och inte vill. Jag tolkar återkopplingar från personen som delvis passiv-aggressivt idiotförklarande som om det vore självklarheter när det är jag som inte är kunnig ännu inom området.

Det sista jag vill behöva fundera på under sommarmånaderna är om jag kommer att få gå om hela Databaskursen (och därmed inte komma in på andra kurser - jag får ångest i ansikten bara jag tänker på det nu) på grund av en otydlig lärare.

Jag sitter nu med en annan som också fått Fx och ett milt ångestanfall (han fick ta tablett mot det). Tydligen fick denna person återkoppling inuti en .md-fil medan jag fick det inuti en klassisk txt-fil.

Än så länge har 5 personer i klassen rapporterat godkänt betyg där en klargjort att personen fick D i slutbetyg. Värst av allt är nog att det nu kommer att dröja till juni månad innan läraren ens börjar gå igenom Fx-arbeten och det är enbart ett försök till efter första nu som gav Fx. Sedan måste man gå om hela kursen igen och då det är en spärrkurs i en framtida kurs så blir det kluvet då med CSN och hela den biten...

Jag blir bara så onödigt less än så länge på denna lärare.

På återseende!

Mvh,
WKL.
---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
🚧(Fx-Komplettering pågår) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧(Pågår) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Pågår) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)

Ja, jag överreagerar såklart eftersom i min situation är det mycket som står på spel: vräkas på lägenheten på grund av CSN på grund av oavklarad kurs på grund av vad jag själv anser är en "opedagogisk lärare". Att bara säga "det är fel" utan att mer utvecklande berätta varför. För läraren är det snart semesterledighet oavsett omdömena i Kursutvärderingen.

Dessutom har jag hört från andra i klassen där de fått motsägelsefulla återkopplingar från läraren. Första gången sa läraren att det skulle göras på ett sätt och sedan i andra återkopplingen säger läraren att det nu plötsligt ska göras på ett helt annat sätt trots att det gjorts på sättet som läraren själv bad om.

Jag har följt följande med svaga entitetstyper baserat på kurslitteraturen:

Det är ett Boende som "äger" antalet rum, och så vidare. I detta specifika företagsfall så är det inte alltid att antalet rum, antalet sängar osv, anges vid första kontakt. För att undvika NULL-värden och felaktiga standardvärden (t.ex. kan det vara som så att det finns noll sängar för att boendeägaren har sagt så men om standardvärdet för icke-angivna värden alltid är noll - och dessa attribut måste finnas för varje boende - så betyder det att noll sängar kan tolkas som faktiskt noll sängar eller standardvärdet noll och detta skapar osäkerhet och opålitlighet av de data i databasen) så används därför separata tabeller för dessa så de bara läggs in när det faktiskt finns data att lägga in och inte "placeholder"-data så att säga.

Vi undviker NULL-värden genom att ha nya tabeller som enbart lägger in nya rader så vi växer på höjden, inte på bredden i de fallen. Detta har jag även motiverat i Verksamhetsbeskrivningen i Projektrapporten (sida 6):

Läraren ville ej läsa massa DB-teori utan snarare läsa om våra motiveringar om varför vi gjort som vi gjort utifrån rådande hypotetiska omständigheter. Detta anser jag att jag har gjort. Jag tycker inte att läraren har motiverat tillräckligt varför det är fel med "number_of" i de svaga entiteterna tillhörande en given "Accommodation" eftersom jag vill undvika NULL- och standardvärden som kan visa sig vara inkorrekta (t.ex. 0 sängar när boendeägaren faktiskt sa så).

Mvh,
WKL.

Både ock typ!

Jag har kommit på bättre tankar idag och vet hur jag med färre tabeller kan uppnå samma slutresultat. Det framgår däremot inte i "återkopplingen" huruvida jag då också ska återspegla ändringarna i INSERT-biten för tabellerna och/eller i projektrapporten eftersom det nu försvinner tabeller och tilkommer nya tabeller som då måste få andra INSERTs.

Ja, lärarens "återkoppling" när man ej fått Fx har varit allt från "ok" till "(mycket) bra jobbat!".

Mvh,
WKL.

Jag lär mig SCSS/SASS
Jag är färdig med Moment 2 i Webbutveckling III-kursen där SCSS/SASS ska tillämpas såväl som fortsättning av implementering av en GulpJS-fil för att automatisera mindre uppgifter som ihopslagning och komprimering av filer. Jag gillar hur det går att minska ned på antalet upprepningar och anamma DRY-tänket inom CSS tack vare SCSS/SASS likt funktionell programmering i JavaScript för att slippa skriva så mycket för att göra samma sak om och om igen.

Det jag funderar på är huruvida det går att skapa en komplex @function i SCSS/SASS som tar emot text- och/eller nummerargument för att på så vis skriva ut massa CSS-kod. Då skulle jag kanske kunna med:

@include writeCSS("argument1","argument2","osv");

... skriva ut CSS-kod nästan som om jag använder Tailwind där man skriver CSS med hjälp av "klassnamnsmaraton". Frågan är om @function kan skapas lika komplext som funktioner i exempelvis PHP eller JavaScript. Jag vill ju låta writeCSS få ta emot hur många argument som helst eller hur få som helst och sedan beta av de den har tagit emot.

Databaskatastrofen kan vara löst
Idag fick jag en Numb3rs-upplevelse (har börjat titta igenom den TV-serien nu, är på säsong 4 av 6) där jag såg framför mig hur jag kan lösa databasprojektuppgiften som jag fått Fx-kompletteringskrav på vilket igår gav mig en irriterande tillfällig chock vilket jag tog ut genom att skriva här - men jag har ändrat inlägget och ändrat språknivån.

Jag kan ha två tabeller för att lösa antalet X, Y, Z för varje Boende. Ena tabellen innehåller givetvis PK för att skapa unikhet, och sedan en FK till vilket Boende, sedan antal av något och sedan en FK till vad för slags antal. Den andra tabellen är då den som innehåller information om vad för slags antal det berör: rum, sängar, sovrum, och så vidare.

Samma lösning kan jag göra med för återkopplingen om Yes_No jag fick. En tabell innehåller då en PK för unikhet, en FK för vilket Boende det gäller, ett fält för antingen Ja eller Nej, en Kommentar (standardvärde är "Ingen kommentar angiven" när det är tomt) och en FK till vad Ja/Nej och/eller kommentaren avser för valt Boende via FK. Andra tabellen här innehåller då vad för slags saker och ting som det kan besvaras Ja/Nej för.

Lösningarna anammar då att växa på höjden genom att lägga till fler nya rader istället för att växa på bredden där nya kolumner läggs till vilket skapar NULL-värden i onödan. Hursomhelst så verkar det vara två kompletteringstillfällen och inte bara ett sådant som jag först trodde. Första är 6:e juni 2023 och andra 23:e augusti 2023 tror jag om jag minns rätt.

Jag suger fortfarande på webbdesign!
Bilden nedan inuti Adobe XD där jag hetsar på med prototypskapande för ett fiktivt bolag ("Skog AB") där erhållna bilder obligatoriskt ska vara med visar på hur jag fortfarande saknar någon som helst "känsla" för webbdesign:

De färgade kolumnerna hjälper mig delvis med att skapa en viss "känsla" i layouten men val färger för knappar, bakgrunder och andra delar är fortfarande riktigt skrikiga sena 90-talet. Som blivande fullstackutvecklare så kommer jag troligen att förbli svag med frontend-biten.

Vilken tur att i vissa fall så kan man få färdiga frontend-mallar som man ska arbeta med som backend-utvecklare så den biten kanske löser sig ändå trots allt!

Jag får vara försiktig med vilka koduppdrag jag väljer att ta mig an så jag inte måste webbdesigna för mycket utan snarare webbutveckla mer!

På återseende!

Mvh,
WKL.

P.S. Mycket schysst i Adobe XD att det går att exportera ut valda SVG-lager till en SVG-fil så jag kunde skapa en logotyp där direkt istället för att krångla i Illustrator. Denna laddas sedan upp för att skapa en favicon av vilket är obligatoriskt till momentet i WP_CMS-kursen.
---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
🚧(Fx-Komplettering pågår) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧(Pågår) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Pågår) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)

Moodboard+prototyp klar
Jag är klar med Moodboard & prototyp nu enligt bild nedan:

Jag provade på Adobe XD då Momentuppgiften kräver att vi redogör för tre olika prototypverktyg vanligt använda för webbdesignprototypande. Jag är redan bekant med Figma så jag provade på Adobe XD och ska även prova på Sketch som det tredje verktyget.

Smått frustrerande uppgift då vi även fick två bilder som med flit var felfärgade som vi behövde färgkorrigera på egen hand. Redogörelsen för de tre verktygen ska ske på våra skapade Wordpressbloggar vilket jag har påbörjat samt bifogat bilder så nu fattas bara texten och en bild för användning av Sketch.

Allt som allt så är denna momentuppgift rätt "matig" för att bara vara ett moment i hela CMS-kursen.

Ful webbplats påbörjad
Den fula webbplatsen är då påbörjad och andras webbplatser som haft samma krav att göra om en webbplats åt det fiktiva bolaget "Skog AB" är riktigt schyssta jämfört med min:

Jag vet inte varför, men det är många saker som gör den så himla ful? (och jag vet inte varför och/eller hur detta kan lösas som) Varför är menyikonerna så fula? Varför stör man sig på placeringen av h2-rubriken? Och så vidare. Allt detta med "webbdesignkänsla" är något vi inte har fått lära oss, inte ens med någon hänvisning till lämplig kurslitteratur och/eller webbövningar för det.

Utbildningen är dock webbutveckling och inte webbdesign och trots att vi ska bli fullstackutvecklare så ligger tyngden mer på backend än frontend. Det kan delvis vara att på grund av Imposter Syndrome så uppfattar jag automatiskt allt jag gör som "extra amatörmässigt" för att "det är ju omöjligt att vara duktigt på något så fort".

I Webbutveckling III-kursen är det ECMAScript som ska vara klart tills nu redan på måndag och onsdag samma vecka ska även moment 3 (SEO) i CMS-kursen vara färdigt. I båda fallen så är det frågor med kodexempel som ska besvaras. Så det blir lite att stå i under helgen.

På återseende!

Mvh,
WKL.

P.S. Nej, sidfotens text klipper ej på webbplatsen, enbart i bildurklippet.
---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
🚧(Fx-Komplettering pågår) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧(Pågår) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Pågår) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)

SCSS-momentet godkänt
Jag har blivit godkänd på SCSS-momentet vilket inte var särskilt komplicerat eller så. Det var dessutom bara en enskild HTML-fil som krävdes. Jag valde att låna ett par bilder från en lokal pizzeria som jag också tänkte göra projektuppgiften baserad på.

Projektuppgiften i Webbutveckling III-kursen, tror jag, handlar om att skapa en REST API-tjänst för bokning av något slag så då tänkte jag att man kunde boka pizzor på nätet likt online-pizzerior.

"Skog AB"-webbplatsen färdig i momentet
Den fruktansvärt fula fiktiva webbplatsen för "Skog AB" är färdig:

En sak jag dock är nöjd med att denna gång kunde jag få "Läs mer"-knappen konsekvent längst ned inuti varje nyhetsinlägg. Det är en grid 3 items per row och sedan i flex column i mobilläge. "Space-between" verkar lösa så att "Läs mer"-knappen kan hamna längst ned.

I tidigare kurser bråkade jag med detta och förstod inte mycket heller av display: flex/grid och hittade någon skum lösning med margin-top inuti någon div eller var det var. Riktigt skumt var det. En annan klurighet är med bilderna då de är av olika storlekar och jag orkade inte med någon större bildbehandlingsprocess.

Annars tänker jag att man kör med konsekventa storlekar - oavsett proportioner - än att behöva bråka med "max-width", "min-height" och liknande. Då kan det vara miniatyrstorlekar under "Nyheter" och sedan länkar till originalstorlekarna inuti respektive inlägg med hjälp av JS.

Nu återstår det att skriva om de tre olika webbdesignprototypverktygen, sedan färdig med detta tråkiga moment i kursen. Projektuppgifterna i kurserna är oftast de roligaste för de innehåller flest fria tyglar för saker och ting.

På återseende!

Mvh,
WKL.
---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
🚧(Fx-Komplettering pågår) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧(Pågår) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Pågår) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
---------------------------------------------------------------------------------

Tack för tipset! Ska göra det hädanefter!

Mycket har hänt
En hel del har hänt senast jag skrev. Framförallt så är det enbart projektuppgifterna kvar i kursårets två sista kurser plus Fx-kompletteringskursen i Databaser *grrr*.

Jag betar av här rubriker vad som har hänt senast i det distansbaserade Webbutvecklingsprogrammet för min egen del.

Moment 3 i Webbutveckling III godkänd
Moment 3 i denna kurs heter "ECMAScript" och handlar om att lära sig om de senaste versionerna av ES. Det gick bra förutom att det var utmanande att förstå sig på Promise-objekten, och då var det extra svårt att visa med kodexempel eftersom jag inte riktigt förstod själv vad som hände.

Men det gick vägen och jag kan se hur High-order funktionerna forEach, map, och reduce kan användas till den kommande projektuppgiften i kursen.

Moment 2 i Webbdesign för CMS godkänd
Moment 2 i CMS-kursen vilket egentligen är Webbdesign för WordPress om vi ska vara ärliga.

Det är det enda CMS:et som vi delvis fördjupar oss i. Det finns en kursbok (WordPress 5 Complete) för den som vill försöka fördjupa sig ännu mer i det.

Men jag finner det extremt tråkigt, mest för att det är fokus på frontend och lite på backend även om det krävs en del förståelse för backend för att ens kunna göra något vettigt på frontend-sidan i WordPress.

Moment 4 i Webbutveckling III godkänd
Moment 4 här i kursen var att lära sig väldigt grundläggande TypeScript vilket främst verkar handla om att koda JavaScript med hårdtypat med variablerna, likt hur det är i C++ som jag "lattjo-kodade" på gymnasiet för drygt 15 år sedan.

Det gick bra förutom att jag fick ett problem med att köra if-satser som behandlade olika hårdtypade datatyper.

Exempelvis ville jag kolla om ett inmatningsfält av typen <input type="number"> var tomt och därmed visa ett felmeddelande. Jag hade Number i gränssnittet så det var rätt datatyp.

Men TypeScript ville inte acceptera att jag kollade om ett nummerinmatningsfält var tomt och NaN-kontroll verkade inte heller fungera. Så där är jag fortfarande huvudkliandes över hur jag ska göra i framtiden om jag vill kontrollera att inmatningsfältet är tomt innan jag ens kollar om det är NaN eller inte.

Efter det så beslöt jag att inte ge mig an Projektuppgiften i kursen med hjälp av TypeScript utan det får bli förenklade "lattjo-typade" ES6 istället!

Moment 3 i Webbdesign för CMS godkänd
Moment 3 i WordPress-kursen - om vi ska kalla kursen för vad det verkligen är - gick bra även om det var segt i början att få saker och ting att hamna på rätt plats i "The Loop" och i de olika php-filerna.

Vad som gjorde mig riktigt förbannad dock och nästan så att jag hatar WordPress numera är att det hela tiden kunde introducera egen HTML- & CSS-kod här och var.

Exempelvis när man skapar inlägg (eng. Posts) så slänger den automatiskt <strong> på h1-h6-rubrikerna vilket bråkade totalt med min CSS och i vissa fall ville CSS:en inte ens "marginalcentrera" (margin: 0 auto) av någon anledning.

Men jag tror det var för att jag glömde sätta en maxlängd, men hör och häpna: <strong> som appliceras på h1-h6-rubrikerna som anses vara "Block" i WordPress får ändå display: inline (vad i h-???).

Moment 5 i Webbutveckling III godkänd
Moment 5 i Webbutveckling III-kursen var verkligen början på något nytt: att skapa en egen REST API-webbtjänst där JSON-data skickas och tas emot för att sedan göra något med den.

På backend-sidan lagras det i databas och från databasen läses data ut som sedan skickas som JSON-data för att då skrivas ut på frontend.

Jag hade två irriterande utmaningar: först klassiska som tidigare med JSON-data från studentservern som inte klarar av att lagra ÅÄÖ korrekt trots att den har teckenkodningsval för svenska språket.

Fast nu när jag kollar upp så verkar det snarare handla om att studentserverns databas (MySQL, Server charset: UTF-8 Unicode (utf8)). Den visar alltså åäöÅÄÖ i fel teckenkodning men skickar det korrekt i JSON.

För när den inte kunde skicka korrekt JSON-data så vägrade den då skicka JSON och bara i vissa fall fick jag felmeddelande om det i webbläsarens konsol om att JSON-data var ogitlig och därmed ej kunde hämtas.

Den andra utmaningen var mer en miss i min REST API-kodning. Det i princip alla har gjort är att följa demonstrationen där en switch används med olika case för att göra olika saker beroende på vilken HTTP-metod som skickats från klienten.

Då hade jag en default: som bara skickade tillbaka http_response_code(405) och detta visade sig innebära att när XHR OPTIONS skickades i CORS preflight-syften orsakade att PUT, DELETE & POST ej fungerade när klient och REST API:n kördes från på olika servrar.

Jag trodde under en längre tid att jag hade ett trasigt studentkonto på serversidan men det visade sig snarare att min REST API-kod var "trasig"!

Jag lyckades med hela CRUD-biten så jag är redo att göra mer eller mindre samma sak om än med möjligen mer komplex JSON-data i Projektuppgiften.

Varit på IT-konsultevenemang som student
För ett par veckor sedan var jag på lokalt IT-konsultevenemang för studenter i staden där jag bor och även studerar på distans (på så vis kunde jag träffa lärarna beskrivet i nästa rubrik).

Jag var dessvärre den enda från hela min "virtuella skolklass" medan det var två andra klasser från Civilingenjör inriktning industriell ekonomi och några andra separata elever från andra utbildningar från samma campus.

Det blev en hel del snack om SOLID, och IT-konsultbolaget ville lyfta fram hur platt deras organisation är och hur korta beslutskedjor de har, och hur vissa studenter lyckas få jobb där efter LIA i vissa fall.

En person är "Lösningsarkitekt" vilket låter lite lustigt tycker jag. Det påminner mig om städare som finare kallas för hygientekniker. Själv kallar jag mig endast för webbkodare även om "software engineer" brukar rekommenderas om man ska titulera på LinkedIn.

Personligen tycker jag att om man ska kalla sig för "engineer" i mjukvarusammanhang så ska man bannemig förstå C++ på djup nivå och kanske nästan Assembler. För "ingenjör" är inget ord som bara användas för intet. Det innebär djup förståelse i mina ögon.

Jag fattar fortfarande inte allt som sker "under the hood" när JavaScript körs i webbläsaren mer än förberedande hoisting, lagring av deklarerade functions och att saker och ting läggs till en stack och att "först in blir först ut", samt Event-hanteraren som kan göra JS-upplevelsen mer "dynamisk".

Att kalla mig för "WebbKodMagiker" vore närmare sanningen för mycket som faktiskt sker är nästan "ren magi" i mina ögon på grund av allt jag inte riktigt förstår som pågår "under the hood" som sagt var.

Träffat programutbildningens lärare på plats
För någon vecka sedan passade jag även på att träffa lärarna för första gången på plats på campus då jag bor nära det. Jag fick skjuts av en god vän som jag även då höll på att hjälpa med en akut sak (mer om det i nästa rubrik).

Väl på plats så är ena läraren nästan två meter lång, axelbredare än mig, och har över 10 års erfarenhet inom branschen innan han blev lärare. Andra läraren är bara runt 1,6 meter lång (kortare än mig) och ser mindre ut i verkligheten än framför kameran.

Jag drack två koppar chokladdryck då jag älskar den drycken och den smakade precis som den gjorde för 8 år sedan då jag senast studerade vid samma universitet, den gången fysiskt med fysiska klasskamrater och så vidare.

Hjälpt en god vän med nöd och näppe
För drygt en vecka sedan så hade en god vän till mig råkat impulsköpa något trams via Instagram och säljvideon som han fastnade för försvann även (seriöst, eller hur?). Han hade då bränt nästan 9 lax på något som annars kostar runt 29-79 $.

Det hela kallas för en "färdigbyggd butik" när det i själva verket är en Shopify-butik som fått lite copy&paste i annonstext och produkter som sedan köparen (då även min vän) skulle lägga egna pengar på att annonsera på Facebook för 6000 SEK sammanlagt under två olika omgångar (3000+3000).

Som tur var hade vännen hunnit åberopat ångerrätten tidigt så det fanns mycket som var vid hans sida och vi lyckades också träffa en Konsumentvägledare vilket gav han mer lugn och mig mer tro att detta skulle vi lyckas med.

Vad vi gjorde var att använda konsumenträttigheter, ursäkta jag menar, "hota", som "influencern" själv upplevde det hela, när vi berättade att vi skulle ARN-anmäla och skriva på TrustPilot om "köpupplevelsen".

Pengarna lovades komma tillbaka in på vännens bankkonto inom 7-10 arbetsdagar men det tog bara 1 arbetsdag efter återbetalningskvittot.

Lustig uppdatering här: idag när jag skriver detta så skrev vännen att någon annan från "bolaget" hade svarat på hans ångerrätt och att "tyvärr är detta skräddarsytt". Personen som besvarade har samma efternamn som "influencern" men hade alltså ingen aning om att pengarna hade återbetalats. De har alltså ingen koll alls på vad de pysslar med trots att de verkar vara släktrelaterade.

Projektuppgiften i Webbutveckling III
Projektuppgiften i Webbutveckling III är att skapa en "headless CMS" i grund och botten genom att dela in det hela i tre delar:
1) REST API-webbtjänst som enbart är PHP-filer som tar emot JSON-baserade HTTP-metoder och sedan skickar tillbaka JSON-baserade responser.

2) Administrationsanvändargränssnitt där personer till det fiktiva företaget i projektuppgiften kan logga in och göra ditten och datten vilket i sin tur kommunicerar med REST API som är det enda som har kontakt med databasen där alla JSON-erhållen data lagras och läses från.

3) En frontend (*suck* ) där besökare kan boka bord och/eller göra "take away"-beställningar på livsmedel där kommunikationen sker då mot REST API:t. Besökarna får se tillgängliga menyer som "personalen" har skapat från sitt håll. Detta bör då fullända "headless CMS"-cirkeln.

Detta projekt ser jag som roligast medan...

Projektuppgiften i Webbdesign för CMS
... Projektuppgiften i Webbdesign för CMS, jag menar WordPress, känns riktig tråkig för det är främst fokus på frontend-delen, alltså utseendet. Jag har verkligen noll känsla för webbdesign, inte webbutveckling och jag anser att man ska fortsätta bygga vidare på sina styrkor istället för att försöka stärka sina svagheter för annars riskerar man att bara bli "halvbra" på mycket istället för "slipskarp på få saker", nischad kompetens med andra ord.

Ja, det stämmer att utbildningen syftar på att skapa en fullstackare utav en men kollar vi på utbildningens kurser så fokuserar de flesta på backend-biten. Det är också denna bit som jag finner roligast för det går nästan bara att göra "fel" eller "rätt" medan design kan verka rätt kodmässigt men se riktigt "ful" och därmed "fel" ut.

Detta tror jag blir den första webbkodningskursen som jag medvetet kommer att sikta på lägre betyg för jag tycker inte WordPress är roligt och det är för mycket som händer bakom kulisserna i WordPress som gör mig så less på CSS-kodandet när den introducerar egen HTML- & CSS-kod där jag inte väntade mig så jag måste göra om min egen CSS-kod så det ska bli & se "rätt" ut.

Kompletteringen i Databaskursen
Och så har vi till sist den förbaskade Databaskursen med världens mest krångliga lärare? Läraren känns som en skön snubbe att hänga med på krogen och ta en öl eller två med. När det däremot kommer till denna kurs så är det helt andra bullar och känns mer som om det krockar än ingenting annat.

Det är just att återkopplingen från läraren som endast är "Ok" eller "Bra jobbat" när det är rätt gjort medan när det är fel så blir det nästan ifrågasättande i hur det presenteras. Detta skaver smått och gjorde inlärningsupplevelsen från läraren mindre kul medan databaser i sig är riktigt kul att ha lärt sig grundläggande om.

En sak med MySQL-databaser jag funderar på är dock: Måste jag JOINa två tabeller för att kunna läsa ut värdet som en Foreign Key pekar på i en annan tabell? Alltså, jag har exempelvis en tabell med en Foreign Key vilket då pekar på en rad i en annan tabell men när jag läser ut tabellen som har denna Foreign key så vill jag ju ha värdet som denna Foreign Key pekar på och inte raden i den tabellen. Här verkar då endast en JOIN av de två tabellerna fungera för att då kunna läsa ut Foreign Keys radvärde istället för dess radidentifiering (alltså FK-värdet)?

Auf Wiedersehen!
Detta var då den mustiga uppdateringen.

Jag kommer att lägga upp git repo för projektuppgifterna när de har lämnats in plus git repo för projektuppgiften i Webbutveckling II vilket jag inte ännu har gjort.

På återseende om en eller två veckor!

Mvh,
WKL.
---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
🚧(Fx-Komplettering pågår) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧(Projektuppgift Pågår) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift Pågår) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
---------------------------------------------------------------------------------

Mer har hänt!
"Good news, everyone!" som gamlingen i Futurama säger. Jag har ett par trevliga godbitar att dela med mig av nu innan första läsåret av Webbutvecklingsprogrammet på distans konkluderas!

Grävt ned "digitala stridsyxan" med Databasläraren
Igår valde jag att prova min lycka att besöka Databasläraren som via "digital kommunikation" har upplevts som mycket bristfällig och friktionsladdad enligt mig och många andra i den virtuella klassen.

Jag klev in i Databaslärarens arbetsrum och hörde genast hur "bossmusik" började byggas upp. Men när Databasläraren öppnade sin mun så förvandlades musiken omedelbart till "Min Lilla Ponny"-musik.

Den digitala fasaden bröts ned och det visar sig att Databasläraren är mycket mer tillmötesgående i person än hur personen annars kan uppleva i "digital kommunikation".

Jag frågade om vad exakt behövdes kompletteras i Databasprojektet. Och det var som jag misstänkte: om jag ska ändra ER-diagrammet så ska detta även reflekteras i Projektrapporten och SQL-koden.

Den så kallade "digitala stridsyxan" i mina sinnen kunde nu grävas ned en gång för alla!

Databaskursens Fx-komplettering är äntligen inlämnad
När jag kom hem efter det livsförändrade lärarmötet så hoppade jag genast på Databasprojektuppgiften när motivationen var som högst.

Jag tog hjälp av två duktiga Databasare i den virtuella klassen som tog en titt på mina basrelationer och tabeller:

/* A_Number_Of = Kategorier av Antal av olika slags rum och andra numeriska ting för ett Boende */
CREATE TABLE A_Number_Of(
  id INT NOT NULL AUTO_INCREMENT,
  Number_Of_What VARCHAR(128) NOT NULL,
  PRIMARY KEY (id)
);

/* Also_Included = Kategorier av olika "bekvämligheter" (eng. amenities) som kan ingå Boende */
CREATE TABLE Also_Included(
  id INT NOT NULL AUTO_INCREMENT,
  What_Also_Included VARCHAR(128) NOT NULL,
  PRIMARY KEY (id)
);

/* AccAlsoIncluded = Kopplar samman huruvida ett Boende har en "bekvämlighet/amenitet" och/eller kommentar om det */
CREATE TABLE AccAlsoIncluded(
  AccId INT NOT NULL,
  CategoryId INT NOT NULL,
  Yes_No ENUM('Ja','Nej') NOT NULL DEFAULT 'Nej',
  Comment TEXT DEFAULT 'Ingen kommentar',
  PRIMARY KEY (AccId,CategoryId),
  FOREIGN KEY (AccId) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE,
  FOREIGN KEY (CategoryId) REFERENCES Also_Included(id) ON DELETE CASCADE
);

/* AccNumberOf = Kopplar samman antalet ett Boende har av något (t.ex. antalet rum för Boende-nr X) */
CREATE TABLE AccNumberOf(
  AccId INT NOT NULL,
  CategoryId INT NOT NULL,
  Actual_Number INT NOT NULL,
  PRIMARY KEY (AccId,CategoryId),
  FOREIGN KEY (AccId) REFERENCES Accommodation(Acc_id) ON DELETE CASCADE,
  FOREIGN KEY (CategoryId) REFERENCES A_Number_Of(id) ON DELETE CASCADE
);

Från ER-diagrammet:

Vad jag hade svårt att koppla var just hur jag skulle rita i ER-diagrammet för att visa utifrån tabellerna ovan.

Jag har nu två "kategoritabeller" där första låter mig skapa oändligt antal som beskriver "antalet av något för ett Boende" och där andra låter mig skapa oändligt antal som beskriver "något annat som ingår eller ej och en eventuell kommentar om det för ett Boende".

"Många-till-många" sambandstyperna (AccAlsoIncluded & AccNumberOf) var de som jag fick hjälp med att inse att "ja, just det, dessa kopplar samman vilket Boende som har vilket antal av exempelvis antal rum, bäddar, och så vidare, samt om köksutrustning, osv., ingår i priset eller inte och/eller eventuell kommentar om det."

Jag korrigerade alla SQL INSERTS och SQL-frågorna utifrån de nya tabellerna. Skrev om lite i Projektrapporten för att reflektera förändringarna och så lämnade jag in. Jag mejlade även Databasläraren för att fråga så att jag hade lämnat in Fx-kompletteringen i rätt "inlämningslåda".

Tråkiga WordPress-kursens Figma prototypande är snart klar
Sedan fortsatte jag med min största ärkefiende hittills i min Webbutvecklingskarriär: icke-användarvänliga Figma för de som saknar känsla för webbdesign.

Prototyp för WordPress-kursens projektuppgift: "COZY Hundstugor":

Det finns flera saker som jag stör mig på i Figma för att jag personligen saknar känsla för design:

• Letter-spacing uttrycks i % och inte pixlar.

• Det finns ingen snap-funktion för att textrutor ska få en bredd som gör att de hamnar symmetriskt perfekt inuti en Frame:s totala bredd (jag menar då att jag får förslag på lämplig bredd, inte att den visar vart mitten i Frame:n är vilket jag vet finns). Anta 1024 pixlar bredd och så hälften av det är 512 pixlar. Då vill jag få "snap-förslag" på en bredd för textruta när jag drar storleken så den får en bredd som sedan fungerar perfekt ihop med implicerade margin: 0 auto. Exempelvis: 324 pixlar bredd för textruta och så 350 pixlar för vänster- respektive högermarginal.

• När jag klickar på ett objekt så visar den inte avståndet till topp och vänster/höger kanterna för Frame. Klickar jag på "Kontakt" så jag vill jag se då att det är 16 pixlar till topp och 16 pixlar till höger för att veta dess exakta placering.

• Ingen "Rule of Third" och ingen vidare vägledning från "Grid Columns" (när man får dessa blåa kolumner som man ska rita inuti).

Nåja, det är jag som suger på Webbdesign, och inte programmet som är bristfälligt för Nybörjare som mig!

(En annan sak som gör designen "tråkig" är att det ska vara WordPress-tema-baserat så då kan man inte leka runt lika mycket med flexibla display: Grid; eftersom det måste gå att hanteras av en icke-Webbutvecklare i slutändan!)

Har "instegskraven" för dagens Webbutvecklare ökat?
Avslutningsvis för denna gång så har jag funderat på vad som egentligen krävs numera i "instegskraven" för dagens blivande Webbutvecklare.

Vad jag menar är att om jag tittar hos "Gig Economy Marketplaces" som exempelvis Fiverr och UpWork så känns det som om man måste kunna väldigt mycket mer idag än tidigare för att kunna roffa åt sig gigs/tillfälliga uppdrag.

Dessutom finns det så mycket billigare arbetskraft utomlands än i Sverige. Frågan är om utländska uppdragsgivare har lärt sig "den hårda läxan" av att anlita alldeles för billig arbetskraft och/eller arbetskraft vars arbetskultur är att inte ta egna initiativ utan bara följa kravspecifikationer även när dessa kan innehålla katastrofala saker som skulle ha kunna åtgärdats om bara uppdragstagaren hade tagit egna initiativ?

Att sitta och "kodknega" 8-16 på något företag känner jag inte riktigt är min grej då jag föredrar att välja egen arbetstid utifrån strikta deadlines och kravspecifikationer (en dröm, eller hur? ).

Idag är det ju mycket mer som anses vara vedertaget för en webbplats än vad det var för 10-20 år sedan. Och så verkar det ha blivit stort fokus på UX/UI:t vilket då tar mig till min ärkefiende igen: Webbddesign!

Möjligen finns det gott om backend-uppdrag att hitta och även möjligen ta fram egen backend-baserade "SAAS"? Men då kommer nästa fundering: Eftersom Webbutveckling funnits i ett par decennier nu och även "mognats" så känns det ju som om "alla lösningar för alla problem" redan finns? Och sättet att konkurrera på marknaden då är att kunna erbjuda en kostnadseffektivare+simplare lösning trots att det kanske i grund och botten är exakt samma lösning som konkurrenterna? 🤔

Hursomhelst beräknar jag att bli färdig med de två sista Projektuppgifterna för detta första läsår någon gång mellan 10-20 juni 2023.

På återseende om en eller två veckor!

Mvh,
WKL.

P.S. Bilderna i prototypen (inklusive logotypens bild, "Hundstugor" är Illustrator-bearbetat typsnitt) är AI-genererade med SD 2.1 (512 pruned)-modellen inuti AUTOMATIC1111-WebUI:t för Stable Diffusion.
---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
🚧(Fx Inlämnad för rättning) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧(Projektuppgift Pågår) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift Pågår) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)

Läsår 1 i princip avklarad!
För ett par dagar sedan lämnade jag in mitt "mastodont"-arbete som är Projektuppgiften i Webbutveckling III där jag har kodat fram "proof-of-concept" variant av onlinepizza.

Du kan gå in på webbplatsen och lägga en takeaway-beställning (betala på plats). När du genomfört beställningen får du ett ordernummer vilket lagras i localStorage.

Ordernumret skickas med vid ett PUT REST API-anrop där på en separat administrativ webbplats en inloggad administratör kan godkänna eller neka beställningen.

Om beställningen nekas så meddelas detta efter 15 sekunder på publika webbplatsen (den skickar fetch() var 15:e sekund) samt e-postmeddelande skickas till beställaren.

Om beställningen godkänns så uppdateras detta och beställaren uppmanas att invänta en ytterligare lajvuppdatering som kommer att berätta när beställningen går att hämta på plats.

Det hela härmar alltså onlinepizza, om än i mycket enklare format. Och så går det att skicka formulärmeddelande, lämna recension där man väljer antalet stjärnor över faktiska stjärn-emojis istället för "dropdown menu"-lösningen.

En cool lösning var att lägga till valda pizzor och tillbehör i beställningen: när du klickar på en vara så jämför den med vad som redan ligger i beställningen. Om det redan finnns så ökar den antalet med 1 och därmed delsumman, annars lägger den till nytt. På grund av tidsbrist implementerade jag aldrig så att det gick att ta bort en vara i taget och sedan så den försvinner helt när antalet nått 0.

Vad gäller Wordpress CMS-projektet så blev det en simpel webbplats som heter "COZY Hundstugor" där jag bland annat använde mig av Stable Diffusion och GUI för att ta fram bilder såväl som logotypen till WP-temat. Den rena webbdesignen är rätt "meh" enligt mitt tycke och även om jag kan CSS-koda så kan jag inte veta vad jag ska ändra för att det ska ge känslan "proffsigt, modernt och pålitligt".

Vadå i "princip"?
Jag inväntar fortfarande kompletteringsrättning för Databasprojektet vilket har varit sitt eget kapitel under detta första läsår.

Övriga kurser har gått galant, förutom att jag har fäktats med Figma-prototypskapande och därmed har kurserna "grafik för webben" och "Wordpress CMS" inte varit särskilt roliga de fokuserat mest på frontend/webbdesign än vanlig webbutveckling/backend.

Skulle jag gissa slutbetyg för Wordpress CMS och Webbutveckling III så tror jag på mellan E-C för Wordpress CMS och B-A för Webbutveckling III. Det visar helt enkelt var jag brister någonstans och även vad jag finner roligt och därmed har mest "talang" för.

Vad har jag egentligen lärt mig hittills?
Det är miljonfrågan jag ställer mig själv: jag har kodat fram lite webbdesignbaserade webbplatser, och en hel del rena funktionella webbplatser. Samtidigt anser jag att det är väldigt många smådetaljer som inte har lärts ut ännu i någon av kurserna som jag tänker är "nödvändiga" för branschen:

* Hur krypterar, underhåller och säkerhetskopierar man en SQL-databas enligt branschstandardpraxis?

* Hur gör man med hantering av flera olika uppsättningar av databaser? Skapar man bara nytt databasanslutningsobjekt till alternativ databas om en skulle vara nere?

* Hur fungerar det med "dehydration" när det gäller (in)laddning av data?

* Hur ser branschstandardpraxis ut för deployment av faktiska produktionsklara kodprojekt?

* Vilka fler parametrar ska ingå i ett fetch-anrops header-objekt samt övriga objekt i anropet enligt branschstandardpraxis? När bör anropet avbrytas med AbortController()?

* "Global scope" är rätt uppenbart med ordet "global" men vad sjutton menas med ordet "lexical" i uttrycket "lexical environment" när man pratar om "local scope"? Är "lexical environment" ens "local scope"? Det är en av de få saker som förvirrar mig ännu fast det borde vara "självklart" numera!

* Hur (o)vanligt är det med antalet nivåer av kodabstraktion? Exempelvis från en funktion som gör en specifik sak med en sträng till en funktion som gör något valt men med en sträng. Exempelvis tog jag fram en funktion som tar emot en array med id-värden och sedan kan jag själv bestämma vilken CSS-property och dess värde jag vill applicera till array:n med id-värden:

  // FUNCTION: Repeat setting a specific CSS rule with the same value
  function sameRuleValueCSSById(arrayId, rule, value) {
    arrayId.forEach((id) => {
      byId(id).style[rule] = value;
    });
  }

Nästa nivå hade då varit att bestämma vad för metod som skulle anropas inuti varje vald id-värde medan det nu är bestämt "style". Och ja, byId()-funktionen är en förkortning av document.getElementById();. Tillslut når vi nästa en nivå av "metaprogrammering" vilket kanske sällan är önskvärt sett ur underhållssynpunkt?

* Hur skiljer sig vanligt Promise-objekt från det som finns inuti fetch()? Här är fetch() inuti en funktion:

  function useFetchGet(url, cb) {
    fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => {
      if (res.ok) {
        return res.json().then((data) => {
          cb(data);
        });
      }
    });
  }

Här används istället det som ett returnerat Promise-objekt:

async function useFetchPut(url, formdataAsJSON) {
    const res = await fetch(url, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formdataAsJSON),
    });
    // If response is 200-2XX then return the response object from the REST API
    if (res.ok) {
      return res.json().then((data) => {
        return data;
      });
    } 
    else {
      return res.json().then((data) => {
        return data;
      });
    }
  }

Notera även hur varken .catch() och/eller .finally() finns med här. Jag förstår att .catch() ska fånga "fel" om throw new Error() eller reject(value) anropas. Och jag förstår att .finally() är det som körs oavsett om alla .then() är färdiga eller .catch() körs.

Jag förstår dock inte varför jag kan return data; i async-varianten medan jag inte kan göra det i fetch()-varianten där jag istället måste anropa en funktion med erhållen data. Jag tänkte att jag kunde lagra sista return data i fetch()-varianten i en variabel likt det går att göra med async-varianten för båda använder ju Promise-objektet?

Denna fundering kring Promise-objektet har jag även inkluderat i min Projektrapport i Webbutveckling III för att se om jag äntligen kan förstå det Promise-objektet i samband med fetch()-funktionen.

Sammanfattningsvis så ställer då detta frågan: "Vad kan jag egentligen om jag bara kan koda ihop saker utan att förstå vad som händer 'under huven' så att säga?".

Ett helt år har snart gått sedan jag påbörjade Webbutvecklingsprogrammet på distans vid Mittuniversitetet och en hel del har jag "lärt" mig i viss utsträckning, samtidigt som jag knappt kan något ramverk ännu.

Ramverk blir dock den andra nästa kursen när utbildningen fortsätter igen nu i augusti 2023! Dock blir det Vue av någon anledning och inte React eller Svelte. När jag väl lärt mig ett så kan jag nog lära mig ett annat relativt fort. Allt är ju JavaScript i grunden så jag förstår då varför många YT-kodfolk rekommenderar att man lär sig det fundamentala om JS innan man hoppar på diverse funktionsbibliotek och/eller ramverk.

Några sista ord om det första (förhoppningsvis) avklarade Läsåret
Nu med förmodat avklarat första läsår så är frågan vad man ska göra med ledigheten? Jag är så van att hela tiden vara aktiv med jobb eller studierna. Å andra sidan så kan jag ju nu titta på kodvideos utan att känna att det är i studiesammanhang utan denna gång för att det faktiskt är kul!

Om jag ska kommentera utbildningen i sin helhet hittills så kan jag säga att det är en hel del teori och det är frågan i vilken utsträcknin det kan kännas rätt mycket. Det är en hel del inlämningsuppgpifter där endast teori ska besvaras med källor från Wikipedia då det oftast har saknats faktiska läromedel utöver det som erbjuds inuti studentplattformen Moodle.

Projektrapportskrivningarna har inte heller varit så särskilt roliga eftersom det saknas tillräcklig vägledning om vad som ska inkluderas i de huvudsakliga rubrikerna "Lösningsalternativ", "Metod" med mera. Vad mer finns att exempelvis säga om att en fetch()-funktion har använts? Och då det saknas - än så länge - någon koppling till arbetslivet så finns det inget att motivera med utifrån branschstandardpraxis exempelvis mer än att säga, "Kunden ville ha det så".

Till sist har vi utbildningens svårighetsgrad: En del skulle inte påstå att den är så "nybörjarvänlig" som beskrivningen på internet. Bland annat Webbutveckling I-kursen kan vara en riktig uppförsbacke för det är riktigt ont om lektioner och mycket "leta upp själv på internet" och framförallt introduktionen till det återkommande prototypskapandeverktyget Figma är riktigt bristande här dessvärre (enligt min personliga åsikt såklart).

Jag är en av de få(?) som haft det relativt enkelt förutom designbiten medan jag vet några andra som har haft det enkelt med designbiten men då istället haft bekymmer med backendbiten. Det verkar vara som om vi är mer lagda åt det visuella/artistiska hållet medan andra är mer lagda åt vad som är mer förekommande i backend. En som läst färdigt utbildningen anser att med just tekniska utbildningar så är det många avhopp på grund av svårighetsgraden såväl som att universitetsstudier inte är samma sak som gymnasiet.

Hursomhelst så har jag både haft "tur" i min fallenhet för backendbitarna och samt att jag lärde mig efter Webbutveckling II (PHP-introduktionskurs i princip) att "Nu måste jag lägga ned riktigt med tid om jag vill visa vad jag verkligen går för i de betygsättande momenten i kurserna!". Jag latade mig en hel del i de första kurserna och klarade mig förvånansvärt då. Sedan insåg jag att det blir tuffare vilket också förklarar avhoppen med tiden och då lade jag ned fler timmar, och då blev resultaten också som betygen visar på.

Jag ser nu framemot en viss avkoppling i sommar samt kanske koda ihop något användbart för att hålla igång "kodmusklerna" så att säga!

När jag fått alla kurser avklarade (rättade med godkända betyg) för år 1 så lägger jag äntligen upp deras GitHub Repon här.

Huruvida jag skulle rekommendera denna distansbaserade utbildning eller inte så vet jag inte. Det beror på så många saker: har du disciplinen för vad distansstudier innebär och universitetsstudier i övrigt? Har du det faktiska tekniska intresset för att inte halka efter? Har du viss "fallenhet"/"tur" med ämnet i sig så det inte blir en onödig uppförsbacke varje gång?

På en Discordgrupp jag är med på så pratas det om att utbildningar som har nära samarbeten med näringsverksamheter kan vara att föredra för att få LIA och/eller praktikplats under utbildningens gång som skulle kunna leda till anställning direkt efter utbildningen.

Själv vill jag kunna driva allt online hemifrån, vare sig det blir via UpWork/Fiverr/liknande eller något företag som tillåter 100% distansarbete och att det sker i form av uppdrag istället för 7-16-arbetstider. Det blir helt enkelt vad man gör det till!

"En instruktion i taget".

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
🚧(Inväntar fortfarande Fx-rättning) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)

Jag ville bara snabbt meddela att jag äntligen fått Databaskursprojektuppgiften rättad och godkänd nu. Nu hoppas jag bara på att det dyker upp på Ladok minst 10 gånger snabbare! 🤣

Det var något som skavde mentalt inom mig för att jag uppfattade Fx-återkopplingen så vag att jag var osäker på om jag skulle kunna åtgärda det. Jag lyckades och slutbetyget syns - som vanligt, i framtiden - längst ned här.

Detta innebär att Första Läsåret är officiellt avslutat. För de två övriga kurserna är omöjliga att inte få godkänt på!😁

"En instruktion i taget"

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)

Webbutveckling III klar
Jag har nu fått Webbutveckling III-projektuppgiften rättad och godkänd. Jag fick däremot ingen förklaring kring Promise-objektet i fetch() kontra att använda async som innehåller fetch() inuti sig. Det är något jag får experimentera mig fram själv till att förstå.

En kommentar jag däremot fick var att jag kunde ha inkluderat så kallade "endpoints" i beskrivningen av REST API:t inuti dess README.md-fil. Är "endpoints" då vilka slags parametrar REST API:t förväntar sig och/eller skickar tillbaka i samband med olika responskoder? 🤔

Dilemma kring CMS-kursen
Jag har ett dilemma kring CMS-kursen då det har inlämningsdatum senast 20 augusti 2023 men jag lämnade redan in den tidigt i juni 2023 för att påbörja Webbutveckling III-projektet istället för det ville jag lägga mer "kärlekskrut" på.

Hursomhelst så skulle jag kunna lägga lite mer på CMS-projektuppgiften för att öka betyget något då jag vet att det inte kommer bli något mer än E-C, kanske bara D beroende på hur extra funktionalitet tolkas som, såväl som själva webbdesign biten som inte är mycket att hänga upp.

Jag både vill och vill inte, för jag borde ju slipa på webbdesignbiten och samtidigt känner jag att det är inte vad jag vill utveckla för det är en svaghet som växer mot bromsfriktion i en 69-graders uppförsbacke medan min styrka i backend åker nästan på en räkmacka på en glidmedelssmörjad 45-graders nedförsbacke! 😆

Hur skulle du resonera kring mitt så kallade "dilemma"?

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)