Eigene Website - Informatik Projekt (HTML&PHP)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Eigene Website - Informatik Projekt (HTML&PHP)

    Nabend zusammen,

    hab nen Problem. Und zwar muss ich am Mittwoch nen Info Projekt abgeben. Meins ist es, ne Website zu erstellen auf der man auf Koala-Kämpfe wetten kann :thumbsup:
    Soll jetzt nicht so groß werden. Hatte mir überlegt auf der linken Seite so ne Spalte zu machen wo die kommenden Kämpfe mit Quoten angegeben sind. Auf den rechten 2/3 dann nen Fenster wo nen Video mit dem aktuellen "Kampf" läuft.
    Oben nen Header mit 4 Reitern.
    - Startseite
    - ne seperate Seite wo man wetten kann
    - den eigenen Account
    - Impressum & Bla

    Man soll sich halt nen Account erstellen und mit virtueller Währung wetten können.

    Das ganze soll mit HTML und PHP realisiert werden. Leider fehlen mir jegliche Kenntnisse darüber, da ich mich die letzten 3 Jahre immer irgendwie so durchgeschlängelt hab.

    Kann mir jemand vielleicht nen paar Seiten nennen wo ich Sachen finde die mir dabei helfen? Hab mich schonmal bisschen umgeschaut aber ich hab im Moment weder die Zeit noch die Lust mal eben HTML und PHP zu lernen, bei noch einer verbleibenden Woche Schule^^

    Wäre super wenn jemand da was hat, bin echt aufgeschmissen ?(

  • Ich will dir nur ungern die Illusion zerstören, das bis Mittwoch fertig zu bekommen, aber wenn das nicht jemand für dich nahezu komplett macht oder du das quasi fertig irgendwo kopierst, sehe ich kaum Chancen das in der kurzen Zeit hinzubekommen. Das würde ich sogar sagen, selbst wenn du grundlegende PHP, HTML, (My)SQL, CSS und JavaScript Kenntnisse hättest :S

    Ein guter PHP Einstieg für Anfänger ist dieses Tutorial.
    Kannst dich ja am Mittwoch / Donnerstag nochmal melden, was du letztendlich geschafft hast. Ich bin wirklich gespannt :huh:

  • Moin,

    Für dich unmöglich lösbar, ich kann dir paar Punkte nennen wie ich es eventuell lösen würde:

    (Kurzschritte falls du einen Programmierer auftreiben kannst)
    1. Datenbank anlegen (MySql), Tabellen: Benutzer, Koalas, Kämpfe,Wetten
    2. Webseite kreiren (so einfach wie möglich, (Impressum, Wetten,Startseite)
    3. Für die Wetten trägst du in die Tabellen Benutzer ein, Koalas in die Koalas Tabelle und Kämpfe (z.B Koala 1 gegen 2 Quote 1:10 am 1.3.2014) in die Kämpfe Tabelle. Die Kämpfe werden auf der Wetten Seite gelistet.
    4. Wettet jemand auf einen Kampf trägst du den Wettkoala, seinen Einsatz und den Benutzer in die Wetten Tabelle ein.
    5. Klickt ein User auf die Wetten Seite zeigst du ihm die laufenden Wetten, ist eine Wette abgelaufen wird noch schnell per Zufall ein Sieger gekührt und der Gewinn /Verlust dem Nutzerkonto zugeschrieben.

    Viel Glück,

    Huds0n
    Return of the Ape

  • Ihr denkt alle viel zu kompliziert. Er soll einfach eine komplett statische Seite machen, mit so wenig Features wie möglich. Für ein paar Wetten mit Quoten anzuzeigen braucht man weder eine Datenbank noch großartig PHP.
    Lad dir mal Dreamweaver runter, da gibt es vorgefertigte Seiten mit Header, Seitennavigation und Body.
    Das schwerste wird dann sein auf bestimmte Kämpfe zu setzen. Aber das schaffst du bestimmt!

    Hier mal ein Beispiel.
    Spoiler anzeigen

    HTML-Quellcode

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5. <title>Unbenanntes Dokument</title>
    6. <style type="text/css">
    7. <!--
    8. body {
    9. font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    10. background: #42413C;
    11. margin: 0;
    12. padding: 0;
    13. color: #000;
    14. }
    15. /* ~~ Element-/Tag-Selektoren ~~ */
    16. ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass diese Angaben auch für die .nav-Liste gültig sind, wenn Sie keinen spezifischeren Selektor festlegen. */
    17. padding: 0;
    18. margin: 0;
    19. }
    20. h1, h2, h3, h4, h5, h6, p {
    21. margin-top: 0; /* Durch Entfernen des oberen Randes wird ein Problem vermieden, bei dem Ränder aus dem umgebenden Block entweichen. Der verbleibende untere Rand sorgt für den Abstand von allen folgenden Elementen. */
    22. padding-right: 15px;
    23. padding-left: 15px; /* Hinzufügen von Auffüllungswerten für beide Seiten jeweils enthaltener Blockelemente statt für die Blöcke macht Box-Modell-Berechnungen unnötig. Alternativ kann auch ein untergeordneter Block mit Auffüllung an den Seiten verwendet werden. */
    24. }
    25. a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
    26. border: none;
    27. }
    28. /* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
    29. a:link {
    30. color: #42413C;
    31. text-decoration: underline; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
    32. }
    33. a:visited {
    34. color: #6E6C64;
    35. text-decoration: underline;
    36. }
    37. a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
    38. text-decoration: none;
    39. }
    40. /* ~~ Dieser Container fester Breite umgibt alle anderen Blockelemente. ~~ */
    41. .container {
    42. width: 960px;
    43. background: #FFFFFF;
    44. margin: 0 auto; /* Durch die Angabe der Breite und Verwendung des Werts "auto" für die Seiten wird das Layout zentriert. */
    45. }
    46. /* ~~ Für die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich über die gesamte Breite des Layouts. ~~ */
    47. header {
    48. background: #ADB96E;
    49. }
    50. /* ~~ Dies sind die Spalten für das Layout. ~~
    52. 1) Auffüllung wird nur für den oberen und/oder unteren Bereich der Blockelemente angegeben. Für die Elemente innerhalb dieser Blöcke sind Auffüllungswerte an den Seiten angegeben. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Beachten Sie, dass für den Block selbst definierte Werte für Auffüllung oder Rand an den Seiten zur angegebenen Breite addiert werden und zusammen die *Gesamtbreite* bilden. Sie können stattdessen auch die Auffüllung für das Element innerhalb des Blockelements entfernen und ein zweites Blockelement innerhalb des ersten platzieren. Diesem weisen Sie dann eine Breite von 0 und die für Ihr Design erforderliche Auffüllung zu.
    54. 2) Für die Spalten wurde kein Rand angegeben, da es sich um schwebende Spalten handelt. Wenn Sie dennoch einen Rand angeben möchten, vermeiden Sie Ränder an der Seite, an der sich die schwebende Spalte ausrichtet (z. B.: ein rechter Rand für einen Block, der nach rechts schwebend positioniert wird). In vielen Fällen kann stattdessen eine Auffüllung verwendet werden. Bei Blöcken, bei denen von dieser Regel abgewichen werden muss, fügen Sie der CSS-Regel des Blockelements die Deklaration "display:inline" hinzu, um ein Problem mit einigen Versionen des Internet Explorer zu vermeiden, bei dem der Rand verdoppelt wird.
    56. 3) Da Klassen in einem Dokument mehrmals verwendet werden können (und zudem auf ein Element mehrere Klassen angewendet werden können), wurden den Spalten Klassennamen statt IDs zugewiesen. So können beispielsweise bei Bedarf zwei Seitenleisten-Blöcke untereinander angeordnet werden. Diese div-Tags können problemlos in IDs geändert werden, solange Sie sie nur einmal pro Dokument verwenden.
    58. 4) Wenn Sie die Navigation auf der linken statt auf der rechten Seite platzieren möchten, lassen Sie diese Spalten einfach in die andere Richtung fließen (alle nach links anstatt alle nach rechts). Die Spalten werden dann in umgekehrter Reihenfolge dargestellt. Es ist nicht notwendig, die Blöcke im HTML-Quellcode zu verschieben.
    60. */
    61. .sidebar1 {
    62. float: left;
    63. width: 220px;
    64. background: #EADCAE;
    65. padding-bottom: 10px;
    66. }
    67. .content {
    68. padding: 10px 0;
    69. width: 520px;
    70. float: left;
    71. }
    72. aside {
    73. float: left;
    74. width: 220px;
    75. background: #EADCAE;
    76. padding: 10px 0;
    77. }
    79. /* ~~ Mit diesem gruppierten Selektor werden die Listen im .content-Bereich angesprochen. ~~ */
    80. .content ul, .content ol {
    81. padding: 0 15px 15px 40px; /* Diese Auffüllung setzt die rechte Auffüllung in der obigen Regel für Überschriften und Absätze fort. Die Auffüllung wurde unten für den Abstand zwischen anderen Elementen in den Listen und links für den Einzug angegeben. Sie können die Werte nach Bedarf ändern. */
    82. }
    84. /* ~~ Stile für die Navigationslisten (können entfernt werden, wenn Sie ein vordefiniertes Ausklappmenü wie Spry verwenden) ~~ */
    85. nav ul {
    86. list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
    87. border-top: 1px solid #666; /* Hiermit wird der obere Rahmen für die Hyperlinks erstellt. Alle anderen werden mit einem unteren Rahmen im LI-Element platziert. */
    88. margin-bottom: 15px; /* Hiermit wird der Abstand zwischen den Navigationselementen und den darunter angeordneten Inhalten erstellt. */
    89. }
    90. nav ul li {
    91. border-bottom: 1px solid #666; /* Hiermit wird die Trennung der Schaltflächen erstellt. */
    92. }
    93. nav ul a, nav ul a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen das Erscheinungsbild einer Schaltfläche beibehalten. */
    94. padding: 5px 5px 5px 15px;
    95. display: block; /* Hiermit werden die Blockeigenschaften für Hyperlinks angegeben, sodass das gesamte umschließende LI-Element ausgefüllt wird. Hiermit wird angegeben, dass der gesamte Bereich auf einen Mausklick reagiert. */
    96. width: 200px; /*Mit dieser Breite reagiert die gesamte Schaltfläche in IE6 auf Mausklicks. Kann entfernt werden, wenn IE6 nicht unterstützt werden muss. Berechnen Sie die exakte Breite durch Subtrahieren der Auffüllung für diesen Hyperlink von der Breite des Containers für die Seitenleiste. */
    97. text-decoration: none;
    98. background: #C6D580;
    99. }
    100. nav ul a:hover, nav ul a:active, nav ul a:focus { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
    101. background: #ADB96E;
    102. color: #FFF;
    103. }
    105. /* ~~ Fußzeile ~~ */
    106. footer {
    107. padding: 10px 0;
    108. background: #CCC49F;
    109. position: relative;/* Liefert "hasLayout" für Internet Explorer 6, zum korrekten Rücksetzen der schwebenden Ausrichtung. */
    110. clear: both; /* Diese "clear"-Eigenschaft ermöglicht es dem .container-Block, das Ende der Spalten zu erkennen und sie korrekt zu umschließen. */
    111. }
    112. /* ~~ Verschiedene float/clear-Klassen ~~ */
    113. .fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts schweben lassen. Das schwebende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    114. float: right;
    115. margin-left: 8px;
    116. }
    117. .fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links schweben lassen. Das schwebende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    118. float: left;
    119. margin-right: 8px;
    120. }
    121. .clearfloat { /* Diese Klasse kann einem <br />-Tag oder einem leeren Blockelement als abschließendes Element nach dem letzten schwebenden Block (innerhalb von .container) zugewiesen werden, wenn die Fußzeile entfernt oder aus .container verschoben wird. */
    122. clear:both;
    123. height:0;
    124. font-size: 1px;
    125. line-height: 0px;
    126. }
    128. /*Unterstützung für HTML 5 - Legt für die neuen HTML 5-Tags die Eigenschaft "display:block" fest, damit die Tags in den Browsern korrekt dargestellt werden. */
    129. header, section, footer, aside, nav, article, figure {
    130. display: block;
    131. }
    132. -->
    133. </style><!--[if lt IE 9]>
    134. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    135. <![endif]--></head>
    137. <body>
    139. <div class="container">
    140. <header>
    141. <a href="#"><img src="" alt="Hier Logo einfügen" name="Insert_logo" width="220" height="90" id="Insert_logo" style="background: #C6D580; display:block;" /></a>
    142. </header>
    143. <div class="sidebar1">
    144. <nav>
    145. <ul>
    146. <li><a href="#">Startseite</a></li>
    147. <li><a href="#">Wetten</a></li>
    148. <li><a href="#">Account</a></li>
    149. <li><a href="#">Impressum</a></li>
    150. </ul>
    151. </nav>
    152. <aside>
    153. <p><strong>Kommende Kämpfe</strong></p>
    154. </aside>
    155. <!-- end .sidebar1 --></div>
    156. <article class="content">
    157. <h1>Laufende Kämpfe</h1>
    158. <section>
    159. <h2>Destroyer vs. Kampfkoala</h2>
    160. <p>Quote 1:5</p>
    161. </section>
    162. <section>
    163. <h2>Clearing-Methode</h2>
    164. <p>Da alle Spalten als schwebend formatiert sind, verwendet das vorliegende Layout eine clear:both-Deklaration in der .footer-Regel. Mit dieser Clearing-Technik muss der .container-Bereich zwingend ermitteln, an welcher Stelle die Spalten enden, um Ränder oder Hintergrundfarben anzeigen zu können, die Sie dem Bereich zugewiesen haben. Wenn es Ihr Design erforderlich macht, den .footer-Bereich aus .container zu entfernen, müssen Sie eine andere Clearing-Methode verwenden. Am zuverlässigsten ist es dann, nach der letzten schwebenden Spalte (jedoch vor dem Schließen von .container) ein &lt;br class=&quot;clearfloat&quot; /&gt; oder &lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt; hinzuzufügen. Dadurch wird der gleiche Clearing-Effekt erzielt. </p>
    165. </section>
    166. <section>
    167. <h2>Ersetzen des Logos</h2>
    168. <p>Im vorliegenden Layout wurde ein Bild-Platzhalter an einer Stelle in der Kopfzeile verwendet, an der am besten ein Logo platziert werden sollte. Es empfiehlt sich, dass Sie den Platzhalter entfernen und durch Ihr eigenes, als Hyperlink eingebundenes Logo ersetzen. </p>
    169. <p>Wenn Sie mithilfe des Eigenschafteninspektors im Feld "Quelle" zum Bild Ihres Logos navigieren (anstelle den Platzhalter zu entfernen und zu ersetzen), müssen Sie die Inline-Stile für Hintergrund und Anzeige entfernen. Diese Inline-Stile dienen lediglich zum Anzeigen des Bild-Platzhalters in Browsern zu Demonstrationszwecken. </p>
    170. <p>Stellen Sie zum Entfernen der Inline-Stile sicher, dass das Bedienfeld "CSS-Stile" auf "Aktuell" gesetzt ist. Wählen Sie das Bild aus, klicken Sie im Bereich "Eigenschaften" des Bedienfelds "CSS-Stile" mit der rechten Maustaste und löschen Sie die Anzeige- und Hintergrundeigenschaften. (Sie können die Inline-Stile für das Bild oder den Platzhalter natürlich auch direkt im Code löschen.)</p>
    171. </section>
    172. <!-- end .content --></article>
    173. <aside>
    174. <h4>Hier Video platzieren</h4>
    175. <p>&nbsp;</p>
    176. </aside>
    177. <footer>
    178. <p>Die Fußzeile enthält die Deklaration position:relative; damit in Internet Explorer 6 für die Fußzeile die Eigenschaft hasLayout gesetzt ist und die Ausrichtung schwebender Elemente korrekt zurückgesetzt wird. Die Deklaration kann entfernt werden, wenn IE6 nicht unterstützt werden muss.</p>
    179. <address>
    180. Adresseninhalt
    181. </address>
    182. </footer>
    183. <!-- end .container --></div>
    184. </body>
    185. </html>
    Alles anzeigen

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Pro]phet ()

  • Loginsystem, Wettsystem... hört sich für mich nicht sehr statisch an :thumbdown:

    Heinrich von Kleist schrieb:

    [...] [D]u hast an mir getan, [...] was in Kräften [...] eines Menschen stand, um mich zu retten: Die Wahrheit ist, daß mich auf Erden nicht zu helfen war.

  • Warum sollte er ein LoginSystem benötigen? Er macht einfach nur einen Benutzer, der genug Geld hat um auf alles wie er grade lustig ist zu wetten. Wettsystem? Ein Eingabefeld wo man einen Betrag angibt und auf "Submit" drückt? WOW

  • Erstmal vielen Dank für die Antworten.

    Habe mich dann auch mal ein wenig eingelesen und Ramius' Vermutung hat sich bestätigt, ich wäre verzweifelt. Der Lehrer hat etwas in der Art erwartet, wie Huds0n es geschildert hat.

    Habe aber mit ihm verhandelt und wir sind drauf gekommen, dass ich das Projekt nicht abgebe aber trotzdem kein Defizit bekomme (glatt 4) :thumbsup:

    Eventuell wird als Dankeschön an den Lehrer noch nen Kampf im Koala-Kostüm mit dem Kollegen der das eigentlich auch als Projekt hatte fällig. (Der Kurs kann dann in Echt wetten)

  • FrozenAnanas schrieb:

    Was heißt denn "wieder"? Wer sagt, dass ichs immer so mache?


    FrozenAnanas schrieb:

    Das ganze soll mit HTML und PHP realisiert werden. Leider fehlen mir jegliche Kenntnisse darüber, da ich mich die letzten 3 Jahre immer irgendwie so durchgeschlängelt hab.



    FrozenAnanas schrieb:

    immer


    und in dem Moment wo man iwelche Daten hat die in nem Formfield submitted werden und dann iwo gespeichert werden um dann wieder angezeigt zu werden, kann man imo nichtmehr von statisch sprechen @Pro]phet
    If the king doesn't lead, how can he expect his subordinates to follow
    And forgive us our trespasses.
    As we forgive those who trespass against us.

    tree^ schrieb:

    was seid ihr alles für hässliche megaspasten. k3 ist der boss!

  • Hatte den Kommentar von chrynox eher generell auf alles schulische bezogen nicht auf Informatik. Mein fehler, sorry :whistling:

    Edit @Rouven1: Er meinte er will mein Abi nicht gefährden. Weiß, dass ich was drauf hab wenn ich Bock drauf hab und meint ich sollte das möglichst schnell finden und da würde mir noch nen Jahr nicht gut tun ;)

  • Kann ich nicht verstehen sowas.... wenn keine Leistung erbracht wird = 6 .... scheiß egal ob das Abi gefährdet ist oder nicht... hat man halt selber schuld gehabt... sowas regt mich echt auf.... andere müssen sich den Arsch aufreißen um wirklich was zu erreichen... und anderen kriegen einfach mal alles in den Arsch geblasen....

    Ohne scheiß...

    Glückspilz du...

  • Das liegt irgendwie an unserer Schule. Alles ziemlich läpsch da. Kann man machen was man will, interessiert keinen. Hab in der 11 und 12.1 auch mehr gemacht aber wenn ich dann sehe wie Leute mit 250-300 Fehlstunden trotzdem noch weiterkommen oder Klausuren Monate später nachschreiben dürfen frag ich mich auch wofür ich den Aufwand betreibe.

    Offiziell hab ich für das Projekt auch ne 6 bekommen aber da ich noch das ein oder andere Referat gehalten hab, gewichtet er die wohl ein bisschen stärker, so dass ich auf ne glatte 4 komme.

  • FrozenAnanas schrieb:

    Hatte den Kommentar von chrynox eher generell auf alles schulische bezogen nicht auf Informatik. Mein fehler, sorry :whistling:

    Edit @Rouven1: Er meinte er will mein Abi nicht gefährden. Weiß, dass ich was drauf hab wenn ich Bock drauf hab und meint ich sollte das möglichst schnell finden und da würde mir noch nen Jahr nicht gut tun ;)


    ist halt eine absolute bullshitaussage. "er hat was drauf, wenn er bock hat" - das ist gerade das problem. es gibt so unglaublich viele talentierte leute die ihren arsch nicht hochbekommen und dann mit hängen und würgen überall durchgetragen werden, ohne einmal in ihrem leben ihren arsch aufraffen zu müssen. weiß dein lehrer überhaupt was abitur bedeutet? abitur bedeutet eigentlich ein reifezeugnis für dich - dass du einerseits fachlich kompetent genug bist um auf die universität zu gehen und andererseits reif genug bist, dich auch mal auf deinen hintern zu setzen und was zu machen.

    keine ahnung was mit dem lehrer falsch geht - wenn man ein projekt hat und zu unfähig ist überhaupt irgendwas abzugeben (wenn du wenigstens ne statische seite gebaut hättest wär das ja schonmal irgendwas gewesen was man im endeffekt mit "grad so geschafft" bewerten könnte) dann hat man es einfach nicht verdient dieses reifezeugnis ausgestellt zu bekommen. wäre wohl eine sehr sinnvolle lektion für dich gewesen einfach mal durchzufallen und das jahr wiederholen zu müssen.

    :cursing: