cody/dj_mix_hosting_software
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add mix lookup, genre support, DJ enhancements.

Browse source
This commit is contained in:
Cody Cook 2024-04-30 01:07:22 -07:00
commit db1d26e122
11 changed files with 741 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

47
classes/DJ.php
View file

@ -19,21 +19,43 @@ class DJ
private $db = null;
public function __construct($slug, $db)
public function __construct($value, $db)
{
$this->slug = $slug;
$this->db = $db;
if (!$this->load_from_slug()) {
return false;
if (ctype_digit((string)$value)) {
$this->id = (int)$value;
return $this->load_from_id();
} else {
return true;
$this->slug = $value;
return $this->load_from_slug();
}
}
private function load_from_slug(): bool
private function load_from_id(): bool
{
$socials = [];
$dj = $this->get_dj_by_slug($this->slug);
$dj = $this->get_dj_by_id($this->id);
return $this->build_dj($dj);
}
private function get_dj_by_id()
{
$stmt = $this->db->prepare("SELECT * FROM djs WHERE id = ?");
$stmt->bind_param("i", $this->id);
$stmt->execute();
$result = $stmt->get_result();
$dj = $result->fetch_assoc();
$stmt->close();
return $dj;
}
/**
* @param $dj
* @return bool
*/
private function build_dj($dj): bool
{
if ($dj) {
if (isset($dj['id'])) {
$this->id = $dj['id'];
@ -44,6 +66,10 @@ class DJ
if (isset($dj['bio'])) {
$this->bio = $dj['bio'];
}
if (isset($dj['slug'])) {
$this->slug = $dj['slug'];
}
if (isset($dj['img'])) {
// is this legacy code?
@ -109,6 +135,13 @@ class DJ
}
}
private function load_from_slug(): bool
{
$socials = [];
$dj = $this->get_dj_by_slug($this->slug);
return $this->build_dj($dj);
}
private function get_dj_by_slug($slug)
{
$stmt = $this->db->prepare("SELECT * FROM djs WHERE slug = ?");

33
classes/Genre.php
View file

@ -3,9 +3,9 @@
class Genre
{
private $id = "" ;
private $id = -1 ;
private $enabled = "";
private $count = "";
private $count = 0;
private $name = "";
private $slug = "";
private $db = "";
@ -13,25 +13,15 @@ class Genre
public function __construct($value, $db)
{
$this->db = $db;
if (intval($value)) {
$this->id = $value;
if ($this->load_by_id()) {
return true;
} else {
return false;
}
if (ctype_digit((string)$value)) {
$this->id = (int)$value;
return $this->load_by_id();
} else {
$this->slug = $value;
if ($this->load_by_slug()) {
return true;
} else {
return false;
}
return $this->load_by_slug();
}
}
private function load_by_id(): bool
{
$genre = $this->get_genre_by_id();
@ -98,5 +88,14 @@ class Genre
return $this->name;
}
public function get_img(): string
{
return "img/no-image1.png";
}
public function get_count(): int
{
return $this->count;
}
}

53
classes/Genres.php Normal file
View file

@ -0,0 +1,53 @@
<?php
class Genres
{
private $db;
private $genres = [];
public function __construct($db)
{
$this->db = $db;
if (!$this->load_all_genres()) {
return false;
} else {
return true;
}
}
private function load_all_genres(): bool
{
$genres = $this->get_all_genres();
if ($genres) {
$this->genres = $genres;
return true;
} else {
return false;
}
}
public function get_all_genres($order = "ASC")
{
$stmt = $this->db->prepare("SELECT * FROM genres ORDER BY name $order");
$stmt->execute();
$result = $stmt->get_result();
$genres = $result->fetch_all(MYSQLI_ASSOC);
$stmt->close();
return $genres;
}
public function get_nonzero_genres()
{
$stmt = $this->db->prepare("SELECT * FROM genres WHERE count > 0 ORDER BY name ASC");
$stmt->execute();
$result = $stmt->get_result();
$genres = $result->fetch_all(MYSQLI_ASSOC);
$stmt->close();
return $genres;
}
}

195
classes/Mix.php Normal file
View file

@ -0,0 +1,195 @@
<?php
class Mix
{
private $id = -1;
private $enabled = false;
private $name = "";
private $slug = "";
private $genre = [];
private $db = null;
private $description = "";
private $cover = "";
private $url = "";
private $seconds = 0;
private $mediaplayer = false;
private $djs = [];
private $genres = [];
private $recorded;
private $created;
private $updated;
private $playcount = 0;
public function __construct($value, $db)
{
$this->db = $db;
if (ctype_digit((string)$value)) {
$this->id = (int)$value;
return $this->load_by_id();
} else {
$this->slug = $value;
return $this->load_by_slug();
}
}
private function load_by_id(): bool
{
$mix = $this->get_mix_by_id();
if ($mix && $mix['name'] != "") {
return $this->build_mix($mix);
} else {
return false;
}
}
private function get_mix_by_id()
{
$stmt = $this->db->prepare("SELECT * FROM mix WHERE id = ?");
$stmt->bind_param("i", $this->id);
$stmt->execute();
$result = $stmt->get_result();
$mix = $result->fetch_assoc();
$stmt->close();
return $mix;
}
private function get_mix_genres()
{
$stmt = $this->db->prepare("SELECT * FROM mix_meta WHERE attribute = 'genre' AND mix_id = ?");
$stmt->bind_param("i", $this->id);
$stmt->execute();
$result = $stmt->get_result();
$genres = $result->fetch_all(MYSQLI_ASSOC);
$stmt->close();
return $genres;
}
private function get_playcount()
{
$stmt = $this->db->prepare("SELECT value FROM mix_meta WHERE attribute = 'playcount' AND mix_id = ?");
$stmt->bind_param("i", $this->id);
$stmt->execute();
$result = $stmt->get_result();
$genres = $result->fetch_all(MYSQLI_ASSOC);
$stmt->close();
return $genres;
}
private function load_by_slug(): bool
{
$mix = $this->get_mix_by_slug();
if ($mix['title'] != "") {
return $this->build_mix($mix);
} else {
return false;
}
}
private function get_mix_by_slug()
{
$stmt = $this->db->prepare("SELECT * FROM mix WHERE slug = ?");
$stmt->bind_param("s", $this->slug);
$stmt->execute();
$result = $stmt->get_result();
$mix = $result->fetch_assoc();
$stmt->close();
return $mix;
}
private function load_mix_genres()
{
$genres = $this->get_mix_genres();
if (count($genres) == 0) {
$this->genres = [];
} else {
// iterate through the genres; add each of the rest to the array
$this->genres = [];
require_once 'Genre.php';
foreach ($genres as $genre) {
$genre = new Genre($genre['value'], $this->db);
if ($genre->get_id() != -1) {
$this->genres[] = ['id' => $genre->get_id(), 'name' => $genre->get_name(), 'slug' => $genre->get_slug()];
}
}
}
}
public function get_img(): string
{
return $this->cover;
}
public function get_id(): int
{
return $this->id;
}
public function get_name(): string
{
return $this->name;
}
public function get_slug(): string
{
return $this->slug;
}
public function get_djs(){
return $this->djs;
}
/**
* @param $mix
* @return true
*/
private function build_mix($mix): bool
{
$this->id = $mix['id'];
$this->name = $mix['title'];
$this->slug = $mix['slug'];
$this->description = $mix['description'];
if (isset($mix['cover'])) {
// is this legacy code?
// the code is legacy if it starts with /dj/,
// if it does, prefix with https://www.utahsdjs.com
if (substr($mix['cover'], 0, 5) == "/djs/") {
$mix['cover'] = substr($mix['cover'], 4);
$this->cover = "https://cdn.utahsdjs.com" . $mix['cover'];
} else {
$this->cover = $mix['cover'];
}
}
$this->url = $mix['url'];
$this->seconds = $mix['seconds'];
$this->mediaplayer = $mix['mediaplayer'];
$this->recorded = $mix['recorded'];
$this->created = $mix['created'];
$this->updated = $mix['lastupdated'];
$this->enabled = $mix['pending'];
require 'DJ.php';
$this->djs[] = new DJ($mix['dj1'], $this->db);
if ($mix['dj2'] != null)
$this->djs[] = new DJ($mix['dj2'], $this->db);
if ($mix['dj3'] != null)
$this->djs[] = new DJ($mix['dj3'], $this->db);
// delete any nulls from the array
$this->djs = array_filter($this->djs);
$this->genre = $this->get_mix_genres();
$this->playcount = $this->get_playcount();
return true;
}
}

19
dj.php
View file

@ -30,7 +30,7 @@ if (isset($_GET['dj']) && $_GET['dj'] != "") {
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $config['app']['name']; ?></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fontawesome/css/all.css" rel="stylesheet" />
<link href="fontawesome/css/all.css" rel="stylesheet"/>
</head>
@ -42,11 +42,11 @@ if (isset($_GET['dj']) && $_GET['dj'] != "") {
<div class="col">
<nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#"><?php echo $locale['home']; ?></a></li>
<li class="breadcrumb-item"><a href="#"><?php echo $locale['djs']; ?></a></li>
<li class="breadcrumb-item"><a href="/"><?php echo $locale['home']; ?></a></li>
<li class="breadcrumb-item"><a href="/djs.php"><?php echo $locale['djs']; ?></a></li>
<li class="breadcrumb-item active"
aria-current="page"><?php
if ($dj && $dj->get_name() != ""){
if ($dj && $dj->get_name() != "") {
echo $dj->get_name();
} else {
@ -67,16 +67,16 @@ if (isset($_GET['dj']) && $_GET['dj'] != "") {
alt="avatar"
class="rounded-circle img-fluid" style="width: 150px;">
<h5 class="my-3"><?php echo $dj->get_name();
?></h5>
?></h5>
<?php
if ($dj->get_claimed()) {
echo '<p class="text-muted mb-1">';
if ($dj->get_claimed()) {
echo '<p class="text-muted mb-1">';
echo "<i class='fa fa-user-shield' style='color: gold'>Claimed</i>";
echo "</p>";
}
}
?>
?>
</p>
<p class="text-muted mb-4">$location1</p>
<div class="d-flex justify-content-center mb-2">
@ -151,6 +151,7 @@ if (isset($_GET['dj']) && $_GET['dj'] != "") {
</p>
</li>";
}
$socials = $dj->get_socials();
foreach ($socials as $key => $value) {

127
genre.php
View file

@ -45,8 +45,8 @@ if (isset($_GET['genre']) && $_GET['genre'] != "") {
<div class="col">
<nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#"><?php echo $locale['home']; ?></a></li>
<li class="breadcrumb-item"><a href="#"><?php echo $locale['genres']; ?></a></li>
<li class="breadcrumb-item"><a href="/"><?php echo $locale['home']; ?></a></li>
<li class="breadcrumb-item"><a href="/genres.php"><?php echo $locale['genres']; ?></a></li>
<li class="breadcrumb-item active"
aria-current="page"><?php
if ($genre && $genre->get_name() != "") {
@ -59,120 +59,36 @@ if (isset($_GET['genre']) && $_GET['genre'] != "") {
</nav>
</div>
</div>
<?php if ($genreNotFound): ?>
<?php if ($genreFound): ?>
<div class="row">
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-body text-center">
<img src="<?php echo $dj->get_img(); ?>"
<img src="<?php echo $genre->get_img(); ?>"
alt="avatar"
class="rounded-circle img-fluid" style="width: 150px;">
<h5 class="my-3"><?php echo $dj->get_name();
<h5 class="my-3"><?php echo $genre->get_name();
?></h5>
<?php
if ($dj->get_claimed()) {
echo '<p class="text-muted mb-1">';
echo "<i class='fa fa-user-shield' style='color: gold'>Claimed</i>";
echo "</p>";
}
?>
</p>
<p class="text-muted mb-4">$location1</p>
<div class="d-flex justify-content-center mb-2">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">
<?php echo $locale['follow']; ?>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init
class="btn btn-outline-primary ms-1"><?php echo $locale['message']; ?>
</button>
</div>
</div>
</div>
<div class="card mb-4 mb-lg-0">
<div class="card-body p-0">
<ul class="list-group list-group-flush rounded-3">
<?php
function social_line($social, $value): string
{
$icon = "";
$url = "";
$color = "#000000";
switch ($social) {
case "facebook":
$icon = "fa-brands fa-facebook";
$url = "https://www.facebook.com/$value";
$color = "#3b5998";
$name = "Facebook";
break;
case "instagram":
$icon = "fa-brands fa-instagram";
$url = "https://www.instagram.com/$value";
$color = "#ac2bac";
$name = "Instagram";
break;
case "twitter":
$icon = "fa-brands fa-twitter";
$url = "https://www.twitter.com/$value";
$color = "#55acee";
$name = "Twitter";
break;
case "myspace":
$icon = "fa-brands fa-myspace";
$url = "https://www.myspace.com/$value";
$color = "#000000";
$name = "Myspace";
break;
case "soundcloud":
$icon = "fa-brands fa-soundcloud";
$url = "https://www.soundcloud.com/$value";
$color = "#ff8800";
$name = "Soundcloud";
break;
case "mixcloud":
$icon = "fa-brands fa-mixcloud";
$url = "https://www.mixcloud.com/$value";
$color = "#00c7f7";
$name = "Mixcloud";
break;
case "spotify":
$icon = "fa-brands fa-spotify";
$url = "https://www.spotify.com/$value";
$color = "#1DB954";
$name = "Spotify";
break;
}
return "
<li class='list-group-item d-flex justify-content-between align-items-center p-3'>
<i class='fa $icon fa-lg' style='color: $color;'></i>
<p class='mb-0'><a href='$url'>$value</a>
</p>
</li>";
}
$socials = $dj->get_socials();
foreach ($socials as $key => $value) {
echo social_line($key, $value);
}
?>
</ul>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Full Name</p>
<p class="mb-0"><?php echo $locale['mix-count']; ?></p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">Johnatan Smith</p>
<p class="text-muted mb-0"><?php echo $genre->get_count(); ?>
</p>
</div>
</div>
<hr>
@ -184,33 +100,6 @@ if (isset($_GET['genre']) && $_GET['genre'] != "") {
<p class="text-muted mb-0">example@example.com</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Phone</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">(097) 234-5678</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Mobile</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">(098) 765-4321</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Address</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">Bay Area, San Francisco, CA</p>
</div>
</div>
</div>
</div>
<div class="row">

111
genres.php Normal file
View file

@ -0,0 +1,111 @@
<?php
// read toml config file
require_once 'vendor/autoload.php';
require_once 'functions/i18n.php';
require_once 'classes/Database.php';
require_once 'classes/Genres.php';
use Yosymfony\Toml\Toml;
$config = Toml::ParseFile('includes/config.toml');
$lang = $_SESSION['lang'] ?? $config['app']['locale'];
$locale = loadLocale($lang);
$genresFound = false;
// if there's a query parameter named 'dj', load the DJ class
$db = new Database($config);
$genres = new Genres($db);
?>
<!doctype html >
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $config['app']['name']; ?></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fontawesome/css/all.css" rel="stylesheet"/>
<style>
.card {
height: 160px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-body {
display: flex;
flex-direction: column;
}
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-text {
flex-grow: 1;
}
.btn {
margin-top: auto;
}
</style>
</head>
<body style="background-color: #eee;">
<?php require 'navbar.php'; ?>
<section style="background-color: #eee;">
<div class="container py-5">
<div class="row">
<div class="col">
<nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="/"><?php echo $locale['home']; ?></a></li>
<li class="breadcrumb-item active"><a href="/genres.php"><?php echo $locale['genres']; ?></a>
</li>
</ol>
</nav>
</div>
</div>
<?php
// we have a list of genres; we need to create them as cards
// loop through $genres->get_all_genres
// create a card for each genre, 4 max per row
$genres = $genres->get_nonzero_genres();
$count = 0;
foreach ($genres as $genre) {
if ($count % 4 == 0) {
echo '<div class="row">';
}
echo '<div class="col-md-3">';
echo '<div class="card mb-4">';
echo '<div class="card-body">';
echo '<h5 class="card-title" title="'.$genre['name'].'">' . $genre['name'] . '</h5>';
echo '<p class="card-text">' . $genre['count'] . ' ' ;
if ($genre['count'] == 1) {
echo $locale['mix'];
} else {
echo $locale['mixes'];
}
echo '</p>';
echo '<a href="/genre.php?genre=' . $genre['slug'] . '" class="btn btn-primary">' . $locale['view'] . '</a>';
echo '</div>';
echo '</div>';
echo '</div>';
if ($count % 4 == 3) {
echo '</div>';
}
$count++;
}
?>
</div>
</section>
</body>
</html>

22
index.php
View file

@ -12,18 +12,32 @@ $lang = $_SESSION['lang'] ?? $config['app']['locale'];
$locale = loadLocale($lang);
?>
<!doctype html >
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $config['app']['name']; ?></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fontawesome/css/all.css" rel="stylesheet"/>
</head>
<body>
<body style="background-color: #eee;">
<?php require 'navbar.php'; ?>
<script src="js/bootstrap.bundle.min.js"></script>
<section style="background-color: #eee;">
<div class="container py-5">
<div class="row">
<div class="col">
<nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item active"><a href="/"><?php echo $locale['home']; ?></a></li>
</ol>
</nav>
</div>
</div>
</div>
</section>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

11
locale/en_US/messages.php
View file

@ -19,4 +19,15 @@ return [
"genre" => "Genre",
"genres" => "Genres",
"genreNotFound" => "Could not load genre; either the genre wasn't found, was empty, or this genre is private.",
"mix-count" => "Mix Count",
"mixes" => "Mixes",
"mix" => "Mix",
"mixNotFound" => "Could not load mix; either the mix wasn't found, was empty, or this mix is private.",
"mixName" => "Mix Name",
"mixDescription" => "Mix Description",
"mixLength" => "Mix Length",
"mixGenre" => "Mix Genre",
"view" => "View",
"mixname" => "Mix Name",
];

242
mix.php Normal file
View file

@ -0,0 +1,242 @@
<?php
// read toml config file
require_once 'vendor/autoload.php';
require_once 'functions/i18n.php';
require_once 'classes/Database.php';
require_once 'classes/Mix.php';
use Yosymfony\Toml\Toml;
$config = Toml::ParseFile('includes/config.toml');
$lang = $_SESSION['lang'] ?? $config['app']['locale'];
$locale = loadLocale($lang);
// if there's a query parameter named 'dj', load the Mix class
$db = new Database($config);
$mixFound = false;
if (isset($_GET['mix']) && $_GET['mix'] != "") {
$mix = new Mix($_GET['mix'], $db);
if ($mix->get_name() != "") {
$mixFound = true;
}
}
?>
<!doctype html >
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $config['app']['name']; ?></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fontawesome/css/all.css" rel="stylesheet"/>
</head>
<body style="background-color: #eee;">
<?php require 'navbar.php'; ?>
<section style="background-color: #eee;">
<div class="container py-5">
<div class="row">
<div class="col">
<nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="/"><?php echo $locale['home']; ?></a></li>
<li class="breadcrumb-item"><a href="/mixes.php"><?php echo $locale['mixes']; ?></a></li>
<li class="breadcrumb-item active"
aria-current="page"><?php
if ($mix && $mix->get_name() != "") {
echo $mix->get_name();
} else {
echo $locale['notfound'];
}
?></li>
</ol>
</nav>
</div>
</div>
<?php if ($mixFound): ?>
<div class="row">
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-body text-center">
<img src="<?php echo $mix->get_img(); ?>"
alt="avatar"
class="img-fluid" style="width: 150px;">
<h5 class="my-3"><?php echo $mix->get_name();
?></h5>
</p>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<p class="mb-0"><?php echo $locale['mixname'] ?></p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0"><?php echo $mix->get_name(); ?></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0"><?php echo $locale['djs'] ?></p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">
<?php
// loop through the $mix['djs'] array and output them in comma separated format
$djs = $mix->get_djs();
$djCount = count($djs);
$i = 0;
foreach ($djs as $dj) {
echo "<a href='/dj.php?dj=";
echo $dj->get_slug();
echo "'>" . $dj->get_name() . "</a>";
if ($i < $djCount - 1) {
echo ", ";
}
$i++;
}
?>
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Phone</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">(097) 234-5678</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Mobile</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">(098) 765-4321</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Address</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">Bay Area, San Francisco, CA</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card mb-4 mb-md-0">
<div class="card-body">
<p class="mb-4"><span class="text-primary font-italic me-1">assigment</span> Project
Status
</p>
<p class="mb-1" style="font-size: .77rem;">Web Design</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 80%"
aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Website Markup</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 72%"
aria-valuenow="72"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">One Page</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 89%"
aria-valuenow="89"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Mobile Template</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 55%"
aria-valuenow="55"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Backend API</p>
<div class="progress rounded mb-2" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 66%"
aria-valuenow="66"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 mb-md-0">
<div class="card-body">
<p class="mb-4"><span class="text-primary font-italic me-1">assigment</span> Project
Status
</p>
<p class="mb-1" style="font-size: .77rem;">Web Design</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 80%"
aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Website Markup</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 72%"
aria-valuenow="72"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">One Page</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 89%"
aria-valuenow="89"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Mobile Template</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 55%"
aria-valuenow="55"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Backend API</p>
<div class="progress rounded mb-2" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 66%"
aria-valuenow="66"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php else: ?>
<div class="row">
<div class="col">
<div class="alert alert-danger" role="alert">
<?php echo $locale['djNotFound']; ?>
</div>
</div>
</div>
<?php endif;
?>
</div>
</section>
</body>
</html>

60
navbar.php
View file

@ -1,28 +1,40 @@
<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#"><?php echo $config['app']['name'];?></a>
<header class="navbar navbar-expand-md navbar-dark bg-dark sticky-top shadow">
<div class="container-fluid">
<a class="navbar-brand pe-3" href="#"><?php echo htmlspecialchars($config['app']['name']); ?></a>
<ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false"
aria-label="Toggle search">
<svg class="bi">
<use xlink:href="#search"/>
</svg>
</button>
</li>
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas"
data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
aria-label="Toggle navigation">
<svg class="bi">
<use xlink:href="#list"/>
</svg>
</button>
</li>
</ul>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle"
aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php
function current_list(): string
{
return ' active" aria-current="page';
}
<div id="navbarSearch" class="navbar-search w-100 collapse">
<input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
?>
<div class="collapse navbar-collapse" id="navbarToggle">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link<?php
// if the page is genres.php, set active and aria-current="page"
if (basename($_SERVER['SCRIPT_NAME']) == 'index.php') {
echo current_list();
}
?>" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link<?php
if (basename($_SERVER['SCRIPT_NAME']) == 'genres.php') {
echo current_list();
}?>" href="/genres.php">Genres</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</header>