Skip to content

Instantly share code, notes, and snippets.

@mackenly

mackenly/design-system.css

Created October 19, 2023 17:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mackenly/012ac0af5185a26ebd0550ef6ef63382 to your computer and use it in GitHub Desktop.
Save mackenly/012ac0af5185a26ebd0550ef6ef63382 to your computer and use it in GitHub Desktop.
Download ZIP
Code Samples from King University Web Programming
Raw
design-system.css
/* import fonts */
@font-face {
font-family: "legacy-book";
src: url("./assets/fonts/LegacySansStd-Book.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "legacy-bold";
src: url("./assets/fonts/LegacySansStd-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "legacy-medium";
src: url("./assets/fonts/LegacySansStd-Medium.otf") format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "weiss";
src: url("./assets/fonts/WeissStd.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "weiss-bold";
src: url("./assets/fonts/WeissStd-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* css variables */
:root {
/* breakpoints */
--breakpoint-mobile: 320px;
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
--breakpoint-desktop-large: 1440px;
/* colors */
--background-color: #f4f4f2;
--white: #fff;
--font-color: #02132b;
--primary-color: #c8102e;
--secondary-color: #083a81;
/* typography */
--font-family: "legacy-book", sans-serif;
--font-family-bold: "legacy-bold", sans-serif;
--font-family-medium: "legacy-medium", sans-serif;
--font-family-weiss: "weiss", sans-serif;
--font-family-weiss-bold: "weiss-bold", sans-serif;
--font-size: 1.06rem;
--font-size-small: 0.9rem;
--font-size-xsmall: 0.8rem;
--font-size-large: 1.2rem;
--font-size-xlarge: 1.8rem;
--font-size-xxlarge: 3rem;
}
/* highlight color */
::-moz-selection {
color: var(--white);
background: var(--secondary-color);
}
::selection {
color: var(--white);
background: var(--secondary-color);
}
html {
box-sizing: border-box;
font-size: 100%;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-variant-ligatures: none;
-webkit-font-variant-ligatures: none;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
font-family: "legacy-book";
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: var(--font-family);
font-size: var(--font-size);
color: var(--font-color);
background-color: var(--background-color);
}
/* typography */
h1 {
font-size: var(--font-size-xxlarge);
font-family: var(--font-family-weiss-bold);
margin: var(--font-size) 0;
text-align: center;
}
h2 {
font-size: var(--font-size-xxlarge);
font-family: var(--font-family-weiss);
font-weight: 400;
color: var(--primary-color);
margin: var(--font-size) 0;
text-align: center;
}
h3 {
font-size: var(--font-size-xlarge);
font-family: var(--font-family-legacy-book);
color: var(--secondary-color);
margin: var(--font-size) 0;
text-align: center;
}
p {
font-size: var(--font-size);
font-family: var(--font-family-legacy-book);
margin: var(--font-size) 0;
text-align: center;
}
/* modal */
#student-page-alert {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.9);
z-index: 999;
display: none;
justify-content: center;
align-items: center;
}
#student-page-alert div {
position: relative;
background-color: var(--white);
color: var(--font-color);
width: 90%;
max-width: 420px;
height: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
padding: 16px;
}
/* Personal Pages */
.alumni-profile-container, .content-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 800px; /* You can adjust this value as needed */
margin: 0 auto;
}
.alumni-profile-container .profile-picture {
width: 100%;
max-width: 300px; /*You can adjust this value as needed */
height: auto;
margin-bottom: 20px;
}
.alumni-profile-container .profile-video {
width: 100%;
max-width: 800px; /* You can adjust this value as needed */
height: auto;
margin-bottom: 20px;
}
/* buttons */
button, .button {
position: relative;
background-color: var(--secondary-color);
color: var(--white);
width: 90%;
max-width: 420px;
height: 60px;
min-height: 60px;
display: flex;
margin: 0 auto;
margin-bottom: 1.875rem;
padding-top: 29px;
padding-bottom: 25px;
padding-left: 16px;
padding-right: 16px;
justify-content: center;
align-items: center;
border: none;
font-family: var(--font-family-legacy-book);
text-decoration: none;
text-transform: uppercase;
font-size: var(--font-size);
}
button:hover, button:focus, button:active, .button:hover, .button:focus, .button:active {
cursor: pointer;
}
button:hover:not(.button-arrow, .button-arrow-left, .button-mini-transparent)::after,
button:focus:not(.button-arrow, .button-arrow-left, .button-mini-transparent)::after,
button:active:not(.button-arrow, .button-arrow-left, .button-mini-transparent)::after,
.button:hover:not(.button-arrow, .button-arrow-left, .button-mini-transparent)::after,
.button:focus:not(.button-arrow, .button-arrow-left, .button-mini-transparent)::after,
.button:active:not(.button-arrow, .button-arrow-left, .button-mini-transparent)::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 25%;
height: 5px;
background-color: var(--white);
animation: growButtonLine 0.3s ease-in-out;
}
@keyframes growButtonLine {
0% {
width: 0;
}
100% {
width: 25%;
}
}
.button-white {
background-color: var(--white);
color: var(--secondary-color);
border: 1px solid var(--white);
}
.button-white:hover:not(.button-arrow)::after,
.button-white:focus:not(.button-arrow)::after,
.button-white:active:not(.button-arrow)::after {
background-color: var(--secondary-color);
}
.button-primary {
background-color: var(--primary-color);
}
.button-secondary {
background-color: var(--secondary-color);
}
.button-transparent {
background-color: transparent;
color: var(--white);
border: 1px solid var(--white);
}
.button-mini-transparent {
background-color: transparent;
font-size: var(--font-size-small);
color: var(--font-color);
border: none;
width: auto;
min-width: auto;
height: auto;
min-height: auto;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
margin: 0 auto;
}
button.button-mini-transparent:hover::after,
button.button-mini-transparent:focus::after,
button.button-mini-transparent:active::after,
.button.button-mini-transparent:hover::after,
.button.button-mini-transparent:focus::after,
.button.button-mini-transparent:active::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 3px;
background-color: var(--font-color);
animation: growButtonLineFull 0.3s ease-in-out;
}
@keyframes growButtonLineFull {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.button-arrow, .button-arrow-left {
background-color: transparent;
font-size: var(--font-size-small);
color: var(--font-color);
border: none;
width: auto;
min-width: auto;
height: auto;
min-height: auto;
padding: 10px 0;
margin: 0 auto;
}
.button-arrow::after {
content: url("./assets/images/chevron.svg");
margin-left: 8px;
width: 8px;
height: 15px;
transition: transform 0.1s ease-in-out;
}
.button-arrow-left::before {
content: url("./assets/images/chevron.svg");
margin-right: 8px;
margin-bottom: 2.5px;
width: 8px;
height: 15px;
transform: rotate(180deg);
transition: transform 0.1s ease-in-out;
}
.button-arrow:hover, .button-arrow:focus, .button-arrow:active, .button-arrow-left:hover, .button-arrow-left:focus, .button-arrow-left:active {
text-decoration: underline;
/* disable grow animation */
animation: none;
}
.button-arrow:hover::after, .button-arrow:focus::after, .button-arrow:active::after {
/* move arrow to the right */
transform: translateX(2px);
transition: transform 0.1s ease-in-out;
}
.button-arrow-left:hover::before, .button-arrow-left:focus::before, .button-arrow-left:active::before {
/* move arrow to the left */
transform: rotate(180deg) translateX(2px);
transition: transform 0.1s ease-in-out;
}
/* card groups */
.card-group {
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
margin: 0 auto;
max-width: 1360px;
}
.link-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: min(420px, 30%);
min-height: 420px;
margin: 0 auto;
margin-bottom: 1.875rem;
padding: 0 0 16px 0;
background-color: var(--white);
box-shadow: 5px 5px 10px 5px rgba(0,0,0,.05);
font-family: var(--font-family-legacy-book);
text-decoration: none;
text-align: center;
}
.link-card:hover, .link-card:focus, .link-card:active {
cursor: pointer;
box-shadow: 0px 0px 0px 4px var(--primary-color);
animation: redBorder 0.2s ease-in-out;
}
@keyframes redBorder {
0% {
box-shadow: 5px 5px 10px 5px rgba(0,0,0,.05);
}
1% {
box-shadow: 5px 5px 10px 5px rgba(0,0,0,0);
}
2% {
box-shadow: 0px 0px 0px 4px rgba(0,0,0,0);
}
100% {
box-shadow: 0px 0px 0px 4px var(--primary-color);
}
}
/* if a link-card also has the class no-hover disable the hover effect and the cursor */
.link-card.no-hover:hover, .link-card.no-hover:focus, .link-card.no-hover:active {
cursor: default;
box-shadow: 5px 5px 10px 5px rgba(0,0,0,.05);
animation: none;
}
.link-card img {
width: 100%;
height: auto;
max-height: 500px;
object-fit: cover;
object-position: top;
}
.link-card h3 {
font-size: var(--font-size-large);
font-family: var(--font-family-weiss-bold);
color: var(--font-color);
margin: 0;
}
.link-card-details {
position: relative;
padding: 10%;
padding-top: 2rem;
padding-bottom: 5%;
}
.link-card .link-card-type {
font-family: var(--font-family-legacy-book);
font-weight: 700;
text-transform: uppercase;
background-color: var(--primary-color);
color: var(--white);
position: absolute;
padding: 0.4rem 1.6rem;
margin: 0;
top: 0%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.link-card .link-card-heading {
margin: revert;
}
.link-card .link-card-date {
font-family: var(--font-family-legacy-bold);
font-weight: 400;
text-transform: uppercase;
color: var(--primary-color);
}
.link-card .link-card-desc {
font-family: var(--font-family-legacy-book);
font-weight: 400;
color: var(--font-color);
margin: 0;
line-height: 30px;
}
.link-card-transparent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: min(420px, 30%);
min-height: 420px;
margin: 0 auto;
padding: 60px 50px;
border: 2px solid var(--secondary-color);
background-color: transparent;
font-family: var(--font-family-legacy-book);
text-decoration: none;
text-align: center;
}
.link-card-transparent hr {
width: 45px;
height: 5px;
background-color: var(--primary-color);
border: none;
margin-bottom: 1.875rem;
transition: width 0.2s ease-in-out;
}
/* animate hr element when hovering over link card */
.link-card-transparent:hover hr, .link-card-transparent:focus hr, .link-card-transparent:active hr {
width: 96px;
/* animate in and out */
animation: linkCardHrGrow 0.2s ease-in-out;
}
@keyframes linkCardHrGrow {
0% {
width: 45px;
}
100% {
width: 96px;
}
0% {
width: 45px;
}
}
.link-card-transparent .link-card-heading {
font-family: var(--font-family-weiss-bold);
font-weight: 400;
color: var(--secondary-color);
font-size: var(--font-size-xxlarge);
}
.link-card-transparent .link-card-desc {
font-family: var(--font-family-legacy-book);
font-weight: 400;
line-height: 1.875rem;
color: var(--font-color);
font-size: var(--font-size);
}
.link-card-transparent:hover button {
text-decoration: underline;
}
@media screen and (max-width: 768px) {
.card-group {
flex-direction: column;
gap: 1.875rem;
}
.link-card-transparent {
max-width: 85%;
margin: 0 auto;
padding: 60px 50px;
}
.link-card {
max-width: 85%;
margin: 0 auto;
}
}
/* form styles */
form {
display: flex;
flex-direction: column;
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 0 1.875rem;
}
form input, form textarea {
width: 100%;
padding: 0.75rem 0.875rem;
margin-bottom: 1rem;
border: 1px solid var(--secondary-color);
border-radius: 5px;
font-family: var(--font-family-legacy-book);
font-weight: 400;
font-size: var(--font-size);
color: var(--font-color);
background-color: transparent;
}
form textarea {
height: 200px;
}
form input[type="submit"] {
position: relative;
background-color: var(--secondary-color);
color: var(--white);
width: 100%;
max-width: 600px;
height: 60px;
min-height: 60px;
display: flex;
margin: 0 auto;
margin-bottom: 1.875rem;
padding-top: 20px;
padding-bottom: 22px;
padding-left: 16px;
padding-right: 16px;
justify-content: center;
align-items: center;
border: 2px solid transparent;
font-family: var(--font-family-legacy-book);
text-decoration: none;
text-transform: uppercase;
font-size: var(--font-size);
cursor: pointer;
}
form input[type="submit"]:hover, form input[type="submit"]:focus, form input[type="submit"]:active {
border: 2px solid var(--white);
box-shadow: 0 0 0 1px #000;
}
/* position checkboxes to the left of their labels */
form input[type="checkbox"] {
width: fit-content;
margin-left: 0;
}
header {
background-color: var(--secondary-color);
color: var(--white);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
header #header-banner-container {
width: 100%;
background-color: #02132b;
}
header #header-banner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px 0;
width: 100%;
color: var(--white);
margin: 0 auto;
max-width: 1360px;
}
header #header-banner nav {
display: flex;
gap: 20px;
padding-right: 25px;
}
header #header-banner a {
margin-left: 25px;
}
header #header-banner .button-mini-transparent,
header #header-main nav ul li .button-mini-transparent {
color: var(--white);
}
header #header-banner .button-mini-transparent:hover::after,
header #header-banner .button-mini-transparent:focus::after,
header #header-banner .button-mini-transparent:active::after,
header #header-main nav ul li .button-mini-transparent:hover::after,
header #header-main nav ul li .button-mini-transparent:focus::after,
header #header-main nav ul li .button-mini-transparent:active::after {
background-color: var(--white);
}
header #header-banner .button-arrow-left {
color: var(--white);
margin-bottom: 0;
margin: 0;
justify-content: normal;
}
header #header-banner .button-arrow-left::before {
filter: invert(1);
}
header #header-main {
margin: 0 auto;
max-width: 1360px;
}
header .header-main-scroll #header-logo {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background-color: var(--secondary-color);
padding: 10px 0 10px 0;
}
header .header-main-scroll #header-logo img {
width: 200px;
}
header #header-logo {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 30px 0 10px 0;
width: 100%;
transition: padding 0.3s ease-in-out;
}
header #header-logo img {
width: 275px;
height: auto;
aspect-ratio: 4/1;
transition: width 0.3s ease-in-out;
}
header #header-main nav ul:not(.header-nav-submenu) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 30px;
padding: 0 15px;
width: 100%;
list-style: none;
}
header #header-main nav ul li .button-mini-transparent {
font-size: calc(var(--font-size-large) * 1.15);
text-transform: capitalize;
}
header #header-main nav ul li {
position: relative;
}
header #header-main nav ul li .header-nav-submenu {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 10px 10px;
width: calc(100%*2.5);
background-color: var(--white);
position: absolute;
top: 100%;
left: 0;
z-index: 100;
z-index: 101;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
list-style: none;
}
header #header-main:not(.header-main-scroll) nav ul li .header-nav-submenu a {
color: var(--font-color);
text-decoration: none;
}
header #header-main:not(.header-main-scroll) nav ul li .header-nav-submenu a:hover,
header #header-main:not(.header-main-scroll) nav ul li .header-nav-submenu a:focus,
header #header-main:not(.header-main-scroll) nav ul li .header-nav-submenu a:active {
text-decoration: underline;
}
header #header-main nav ul li:nth-child(2) {
transform: translateY(1px);
}
header #header-main nav ul li:nth-child(2):hover .header-nav-submenu,
header #header-main nav ul li:nth-child(2):focus .header-nav-submenu,
header #header-main nav ul li:nth-child(2):active .header-nav-submenu {
display: flex;
}
@media screen and (max-width: 425px) {
header #header-logo img {
width: 60vw;
}
header .header-main-scroll #header-logo img {
width: 50vw;
}
header #header-banner nav {
flex-wrap: wrap;
justify-content: right;
}
header #header-banner nav a {
margin: 0;
}
header #header-main:not(.header-main-scroll) nav ul li .header-nav-submenu {
width: 100%;
position: inherit;
}
}
/* footer */
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--secondary-color);
}
footer #footer-ctas {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
padding: 50px 0;
width: 100%;
background-color: var(--primary-color);
border-bottom: 8px solid var(--white);
}
footer .footer-cta-link {
display: block;
width: 500px;
max-width: 25vw;
padding: 20px 0;
font-family: var(--font-family-weiss-bold);
font-weight: 400;
font-size: var(--font-size-large);
color: var(--white);
text-align: center;
text-decoration: none;
}
footer .footer-cta:nth-child(2) {
border: solid 2px var(--white);
border-top: none;
border-bottom: none;
}
footer .footer-cta-link::after {
content: url(./assets/images/arrowIcon.svg);
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
transform: translateY(-2px);
transition: transform 0.2s ease-in-out;
}
footer .footer-cta-link:hover::after, footer .footer-cta-link:focus::after, footer .footer-cta-link:active::after {
transform: translateY(-2px) translateX(6px);
animation: footerCtaArrowPush 0.2s ease-in-out;
}
@keyframes footerCtaArrowPush {
0% {
transform: translateY(-2px) translateX(0px)
}
100% {
transform: translateY(-2px) translateX(6px)
}
}
footer #footer-ctas + #footer-cta {
margin: 0;
transform: translateY(calc(-50% + -4px));
}
footer #footer-main {
display: flex;
flex-direction: column;
}
footer #footer-main img {
width: 100%;
max-width: 300px;
margin: 40px auto;
margin-top: 10px;
}
footer #footer-main-social {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
color: var(--white);
}
footer #footer-main-social svg {
width: 30px;
height: 30px;
margin: 0 10px;
fill: var(--white);
transition: fill 0.2s ease-in-out;
}
footer .ig-social, footer .tw-social, footer .fb-social {
transition: transform 0.3s ease-in-out;
}
footer .ig-social:hover, footer .fb-social:hover {
animation: socialHover 0.3s ease-in-out;
}
footer .tw-social:hover {
animation: twSocialHover 0.3s ease-in-out;
}
@keyframes socialHover {
0% {
transform: scale(1);
}
50% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
@keyframes twSocialHover {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(5deg) scale(0.95);
}
100% {
transform: rotate(0deg) scale(1);
}
}
footer #footer-main hr {
width: 96px;
height: 6px;
background-color: var(--white);
margin: 15px auto;
}
footer #footer-main-menu {
display: flex;
flex-direction: row;
gap: 20px;
text-align: center;
flex-wrap: wrap;
align-content: center;
justify-content: center;
padding: 0;
}
footer #footer-main-menu a {
font-family: var(--font-family-legacy-book);
font-weight: 400;
color: var(--white);
text-decoration: none;
text-transform: uppercase;
}
footer #footer-main-menu a:hover, footer #footer-main-menu a:focus, footer #footer-main-menu a:active {
text-decoration: underline;
}
footer #footer-main-ada {
font-family: var(--font-family-legacy-book);
font-weight: 400;
line-height: 28px;
color: var(--white);
}
footer #footer-main-ada a {
color: var(--white);
}
footer #footer-main-ada a:hover, footer #footer-main-ada a:focus, footer #footer-main-ada a:active {
text-decoration: none;
}
footer #footer-main-info {
display: flex;
align-items: center;
text-align: center;
align-content: center;
justify-content: center;
flex-wrap: wrap;
}
footer #footer-main-info p{
font-family: var(--font-family-legacy-book);
font-size: var(--font-size-small);
font-weight: 400;
color: var(--white);
padding: 0 15px;
}
footer #footer-main-info p a {
color: var(--white);
}
footer #footer-main-info p a:hover {
text-decoration: none;
}
footer #footer-main-info p{
border: solid 2px var(--white);
border-top: none;
border-bottom: none;
border-right: none;
}
footer #footer-main-info p:nth-child(1){
border: none;
}
@media screen and (max-width: 425px) {
footer #footer-ctas {
flex-wrap: wrap;
}
footer #footer-ctas + .footer-cta {
transform: translateY(calc(-50% + -4px));
}
footer .footer-cta:nth-child(2) {
border: none;
}
footer #footer-cta {
width: 80%;
}
footer #footer-main-social {
flex-wrap: wrap;
gap: 10px;
padding-bottom: 10px;
}
footer #footer-main-social p {
width: 100%;
}
footer #footer-main-ada br {
display: none;
}
footer #footer-main-info {
flex-direction: column-reverse;
}
footer #footer-main-info p {
border: none;
}
}
@media screen and (max-width: 320px) {
footer #footer-ctas {
flex-direction: column;
}
}
Raw
rss.php
<?php
// Set content type header to XML
header("Content-Type: application/rss+xml; charset=UTF-8");
// Generate RSS feed
echo "<?xml version='1.0' encoding='UTF-8' ?>";
?>
<rss version="2.0">
<channel>
<title>King Alumni Site</title>
<link>https://group-project.mackenly.com</link>
<description>Latest posts and events from the King Alumni Site</description>
<language>en-us</language>
<?php
// Connect to MySQL server
include_once "dbConnect.php";
// Retrieve posts data from database
$query = "SELECT * FROM posts ORDER BY date_published DESC";
$result = $mysqli->query($query);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
if ($row["type"] == "event") {
echo "<item>";
echo "<title>" . $row["title"] . "</title>";
echo "<link>https://group-project.mackenly.com/post.php?post_id=" . $row["id"] . "</link>";
echo "<description>" . $row["short_description"] . "</description>";
echo "<pubDate>" . date("r", strtotime($row["date_published"])) . "</pubDate>";
echo "<guid>https://group-project.mackenly.com/post.php?post_id=" . $row["id"] . "</guid>";
echo "</item>";
} else if ($row["type"] == "blog") {
echo "<item>";
echo "<title>" . $row["title"] . "</title>";
echo "<link>https://group-project.mackenly.com/post.php?post_id=" . $row["id"] . "</link>";
echo "<description>" . $row["short_description"] . "</description>";
echo "<pubDate>" . date("r", strtotime($row["date_published"])) . "</pubDate>";
echo "<guid>https://group-project.mackenly.com/post.php?post_id=" . $row["id"] . "</guid>";
echo "</item>";
}
}
}
// Close connection
$mysqli->close();
?>
</channel>
</rss>
Raw
schema.sql
DROP DATABASE IF EXISTS group_project;
CREATE DATABASE group_project;
USE group_project;
DROP TABLE IF EXISTS users;
CREATE TABLE users (
id INT NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL,
first_name VARCHAR(50),
last_name VARCHAR(50),
address VARCHAR(100),
phone VARCHAR(20),
email_updates TINYINT(1) NOT NULL DEFAULT 0,
twitter VARCHAR(50),
linkedin VARCHAR(50),
degree VARCHAR(50),
graduation_year INT,
bio TEXT,
PRIMARY KEY (id),
UNIQUE KEY (username)
);
INSERT INTO users (id, username, password, first_name, last_name, address, phone, email_updates, twitter, linkedin, degree, graduation_year, bio) VALUES
(1, 'admin', '$2y$10$hnduagYyAs/rDWtdFz4v7utUGGQ226dDPv8fCXLw79XyNVrF.izDC', 'King Alumni', 'Admin', '124 Way Land Rd', '000-000-0000', 1, 'None', 'None', 'All the degrees', 2024, 'Alumni Admin');
DROP TABLE IF EXISTS posts;
CREATE TABLE posts (
id INT NOT NULL AUTO_INCREMENT,
title VARCHAR(100) NOT NULL,
featured_image_url VARCHAR(255),
type ENUM('event', 'blog') NOT NULL,
short_description TEXT NOT NULL,
post_content TEXT NOT NULL,
event_date DATE,
registration_link VARCHAR(255),
author_id INT NOT NULL,
date_published DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id)
);
INSERT INTO posts (id, title, featured_image_url, type, short_description, post_content, event_date, registration_link, author_id, date_published) VALUES
(1, 'King University Homecoming 2023', 'https://images.unsplash.com/photo-1627627256672-027a4613d028?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1474&q=80', 'event', 'Join us for the King University Homecoming game against rival team XYZ!', 'Lorem ipsum', '2023-10-21', 'https://example.com/register', 1, '2023-04-22 03:59:52'),
(2, 'My Experience at King University', 'https://images.unsplash.com/photo-1573495612937-f01934eeaaa7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80', 'blog', 'I recently graduated from King University, and wanted to share my experiences with other alumni.', 'Lorem ipsum', NULL, NULL, 1, '2023-04-22 03:59:52'),
(3, 'My Graduation Day at King University', 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80', 'blog', 'I recently graduated from King University, and wanted to share my experiences with other alumni.', 'Lorem ipsum', NULL, NULL, 1, '2023-04-22 04:29:58'),
(4, 'Volunteer Highlight: Going the Extra Mile', 'https://images.unsplash.com/photo-1593113630400-ea4288922497?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80', 'blog', 'Our story of how we made a difference in our community through volunteering with King.', 'Lorem ipsum', NULL, NULL, 1, '2023-04-22 04:31:48'),
(5, 'King University Alumni Summit 2023', 'https://images.unsplash.com/photo-1531058020387-3be344556be6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80', 'event', "Alumi Summit is back for 2023. Get tickets now so you don't miss out", 'Lorem ipsum', '2023-07-13', 'https://example.com/register', 1, '2023-04-22 04:34:55'),
(6, 'Susan G. Komen 3-Day Alumni March', 'https://images.unsplash.com/photo-1674574124976-a56d9052c2f8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80', 'blog', 'King alumni showed up in force for this year''s event. Read Susan''s story.', 'Lorem ipsum', NULL, NULL, 1, '2023-04-22 04:40:22'),
(7, 'TEDx Bristol | King Alumni Early Registration', 'https://images.unsplash.com/photo-1560439514-e960a3ef5019?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80', 'event', 'TEDx Bristol is back at King University. Alumni get access to early registration.', 'Lorem ipsum', '2023-08-02', 'https://example.com/register', 1, '2023-04-22 04:42:32');
UPDATE posts SET post_content='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu gravida enim, tristique lobortis dolor. Proin eu
dignissim urna, ac vehicula dolor. Vestibulum vel orci fringilla, tristique nunc sit amet, consequat nulla. Etiam ac ornare orci. Phasellus tempus ante non eros mollis, ac tincidunt libero sagittis. Aliquam aliquet urna ut sem bibendum, vitae auctor neque blandit. Ut lacinia mauris eu tellus tempor ultrices. Curabitur sit amet aliquet sem. Vivamus ornare tellus metus, nec pellentesque lorem ornare sed. In vulputate iaculis diam, nec tempus metus malesuada ut. Ut blandit velit elit, quis volutpat turpis dictum non. Proin at lacinia ipsum.<br>Duis auctor hendrerit felis ac malesuada. In in blandit diam. Maecenas blandit odio vel eros maximus, in placerat nibh tempus. Aenean a auctor elit. In hac habitasse platea dictumst. Nulla consequat pellentesque urna, quis vehicula nisi mollis non. Proin condimentum feugiat ornare. Phasellus aliquet condimentum gravida. Ut fringilla fringilla elit, ut euismod ligula fermentum fermentum. Quisque nec semper nisl. Vivamus vitae consequat turpis. Mauris at purus consequat, pulvinar libero eget, mollis orci.<br>Aenean accumsan, leo non molestie cursus, sapien tortor fringilla tellus, eget imperdiet eros nibh in sapien. Cras faucibus nec diam et tristique. Proin nec purus et dui fermentum tempor. Curabitur quis erat lobortis, finibus mi ut, semper nulla. Suspendisse non massa sed erat tempor ullamcorper. Etiam mattis turpis nec vestibulum elementum. Etiam dictum, lectus quis gravida sagittis, tortor arcu convallis erat, eget auctor purus risus nec ex. Nullam lobortis nisi ut est placerat volutpat. Sed sapien elit, tristique ut eleifend eget, tempor eget tortor.<br>Vivamus auctor massa vel aliquam bibendum. Donec pulvinar ante ex. Quisque convallis finibus orci eget hendrerit. Nam et mi mauris. Maecenas sit amet commodo nulla. Duis aliquet, magna vel sagittis vestibulum, nisi mauris ultrices odio, a tincidunt sapien metus in tellus. Quisque finibus nunc et quam scelerisque dignissim. Sed vitae condimentum lectus, vitae consequat urna. Aenean nec consequat risus, eget viverra ligula. Vestibulum ornare semper lorem imperdiet finibus. Nulla ullamcorper ullamcorper quam non vehicula. Vestibulum tristique ipsum a nulla egestas, eu tristique erat tempor.<br>Praesent facilisis odio sit amet urna aliquet gravida. Nulla mattis tristique ultrices. Maecenas rutrum lorem ut urna aliquet lobortis. Vestibulum volutpat mollis neque non vehicula. Ut quis tempus orci. Proin porta libero lorem, eget placerat tortor lacinia id. Suspendisse sed felis leo. Vivamus metus ex,
luctus suscipit condimentum at, dapibus ac lorem. Phasellus sed turpis mollis, malesuada erat et, pharetra nisl. Cras accumsan diam porttitor, fermentum velit non, sodales turpis. Donec nulla diam, efficitur ac mi in, dapibus sagittis eros. Proin suscipit aliquam sodales. Nam sit amet malesuada purus, non bibendum
enim.<br>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In mauris odio, pellentesque ut lorem id, egestas vestibulum metus. In mi dui, tempus quis mi id, egestas euismod diam. Pellentesque mi sapien, finibus in condimentum in, rhoncus et felis. Ut ultricies consectetur dolor, sed posuere nunc sagittis eget. Nunc aliquam nec massa nec accumsan. Integer blandit finibus odio eu condimentum. Pellentesque nulla risus, viverra sit amet.';
DROP TABLE IF EXISTS comments;
CREATE TABLE comments (
id INT NOT NULL AUTO_INCREMENT,
post_id INT NOT NULL,
user_id INT NOT NULL,
comment_text TEXT NOT NULL,
date_posted DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment