Meeskond "Põhi lax!"

Projekt

• Meediaplayer
• Source: [1]

Projekti ülesanded

• Koostada XML schema
• Ehitada veebiteenus
• Ehitada selle veebiteenuse peale veebirakendus

Projekti liikmed

• Sergei Podust
• Jüri-Joonas Kerem
• Urmas Sepp
• Tiit Ojamets
• Indrek Eiche
• Silver Kuusik
• Alar Järvesoo

Projekti lühi kirjeldus

Meie projekti põhimõte seisneb selles, et klient saab meie veebilehel luua omale playliste, neid muuta ja kustutada. Kui klient playlisti salvestab saab ta omale lingi, mida on võimalik kasutada meie loodud playeriga. Player küsib lingiga veebiteenuselt omale lood ja mängib need lood ette.

Kuidas realiseerisime oma projekti kolm ülesannet

• XML Schema on meil tehtud kasutaja playlisti valideerimiseks. Seda teeb vaikimise meie player kasutades veebiteenust.
• Veebiteenus võimaldab palyeril valideerida kasutaja loodud playlisti ja annab tagasi muusika objektidest koosneva listi, mida player oskab mängida.
• Meediaplayer, kus kasutajal on võimalik sisestada oma playlisti asukoht, kuulata oma lugusid jpm.

Ülesanded

• ehitada veebileht, kus kasutaja saab
  • omale konto luua
  • sisse logida
  • uusi playliste luua (saab oma xmli asukoha lingi)
  • playliste muuta
  • playliste vaadata
  • playliste kustutada
• ehitada veebiteenus, mis
  • genereerib xmlist muusika objektidest koosneva listi
  • valideerib ette antud xmli
• luua meediaplayer,mis
  • mängib ette antud playlistist muusikat
  • teeb lisaks veel igasugu vigureid

Töökäik

01.05 - 02.05

• Projekti läbirääkimine teamis.
• Milline võiks asi välja näha.
• Panime paika ülesanded.

03.05 - 09.05

• Kasutajate registreerimise ja autoriseerimine veebilehel
• XMLSchema
• MusicInfo andme objekt

10.05 - 16.05

• Kasutaja saab luua omale playliste, neid muuta ja kustutada
• Veebiteenus valideerib xmli xmlschema põhjal ja annab tagasi xmlist tehtud MusicInfo listi

17.05 - 23.05

• MeediaPlayer koos tema igasugu vidinatega
• Ilustasime ja kujundasime playerit ja veebilehte

XML, XMLSchema, XSLT

XML

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="../../sheets/html.xslt"?>
<items>
  <playlist_info>
    <name>Minu list</name>
    <description>Minu muusikalist - rokki ja kantrit</description>
  </playlist_info>
  <item>
    <songName>No Woman, No Cry</songName>
    <location>http://www.mt.net.mk/mediacorner/mp3/Bob%20Marley%20-%20No%20Woman%20No%20Cry%281%29.mp3</location>
    <artist>Bob Marley</artist>
  </item>
  <item>
    <songName>In the End</songName>
    <location>http://culture.dyu.ac.kr/lec/files/Linkinpark%20-%20In%20The%20End.mp3</location>
    <artist>Linkin Park</artist>
  </item>
  <item>
    <songName>Benny Hill</songName>
    <location>http://www.ezarchive.com/dusted21/AlbumSpace/6ASPF6AAO0/Yakety+Sax+-+Benny+Hill.mp3</location>
    <artist>Yakety Sax</artist>
  </item>
</items>

XML Schema

<?xml version="1.0" encoding="utf-8" ?>
<xs:schema id="MusicList"
                  targetNamespace="http://tempuri.org/MusicList.xsd"
                  elementFormDefault="qualified"
                  attributeFormDefault="qualified"
                  xmlns="http://tempuri.org/MusicList.xsd"
                  xmlns:mstns="http://tempuri.org/MusicList.xsd"
                  xmlns:xs="http://www.w3.org/2001/XMLSchema"
                  xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">

  <xs:element name="MusicListItems" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
	<xs:complexType>
	  <xs:sequence>
	      <xs:element name="playlist_info" maxOccurs="1" minOccurs="1" >
      <xs:complexType>
	<xs:sequence>
	  <xs:element name="name" type="xs:string" maxOccurs="1" minOccurs="1" />
	  <xs:element name="description" type="xs:string" maxOccurs="1" minOccurs="1" />
	</xs:sequence>
      </xs:complexType>
    </xs:element>	
    
            <xs:element maxOccurs="unbounded" name="item">
              <xs:complexType>
                <xs:sequence>
                  <xs:element name="artist" type="xs:string" maxOccurs="1" minOccurs="1" />
                  <xs:element name="songName" type="xs:string" maxOccurs="1" minOccurs="1" />
                  <xs:element name="location" type="xs:string" maxOccurs="1" minOccurs="1" />
                </xs:sequence>
              </xs:complexType>
            </xs:element>
          </xs:sequence>
        </xs:complexType>
  </xs:element>
</xs:schema>

XSLT

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>

  <xsl:template match="/">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
          <title>
            <xsl:value-of select="items/playlist_info/name"/>
          </title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <meta name="author" content="Põhi lax!" />
          <style type="text/css">
            /*
            "GENERAL" - main styles.
            "PAGE" - page styles.
            "HEADER" - header styles.
            "CONTENT" - content styles.
            "FOOTER" - footer styles.
            */



            /* ---------------- GENERAL ----------------- */
            body {
            padding: 0;
            margin: 0;
            text-align: center;
            background-color: #333333;
            height: 100%;
            }

            html, body, h1, h2, h3, h4, h5, h6, p, img {
            margin: 0;
            padding: 0;
            border: 0;
            }

            table, td, th {
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 100%;
            }

            ul, ol, li {
            margin-top: 0px;
            margin-bottom: 0px;
            }

            .hidden {
            display: none;
            visibility: hidden;
            }

            .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
            clear: both;
            height: 0;
            font-size: 1px;
            line-height: 0px;
            }



            /* ---------------- PAGE ------------------ */
            #page {
            text-align: left;
            font-size: 1em;
            width: 100%;
            margin: 0 auto;
            position: relative;
            }

            #holder {
            min-width: 970px;
            max-width: 1300px;
            margin: 0 auto;
            padding: 10px;
            position: relative;
            }



            /* -------------- HEADER --------------------- */
            #header {
            text-align: center;
            color: #fff;
            }

            #header h1 {
            color: #CCCCCC;
            }

            /* ---------------- CONTENT ------------------- */
            #content {
            margin: 0 0 0 0px;
            padding: 0 0 0 0px;
            }

            /* CONTENT - default */
            #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            margin: 0 0 15px 0;

            }

            #content ol {
            }

            #content ul {
            }

            #content table {
            border: 2px solid #666666;
            }

            #content td, #content th {
            padding: 0px;
            color: #FFFFFF;
            text-align: center;
            }

            #content td {

            }
            #content th {
            color: #CCCCCC;
            font-weight: bold;
            border-bottom: 2px solid #666666;
            }


            /* CONTENT - others */



            /* ---------------- FOOTER -------------------- */
            #footer {
            font-size: 0.7em;
            text-align: center;
            }

            #footer li {
            list-style-type: none;
            text-align: center;
            display: inline;
            color: #999999;
            }

            #footer li a {
            color: #0000FF;
            text-decoration:none;
            }

            #footer li a:hover {
            text-decoration: underline;
            }

            #footer span {
            padding:0 4px;
            color: #666666;
            }
            a {
              color: gray;
              font-family: "Times New Roman";
            }
          </style>
        </head>
        <body>
          <!-- page start -->
          <div id="page">

            <!-- holder start -->
            <div id="holder">
              <!-- header start -->
              <div id="header">
                <h1><xsl:value-of select="items/playlist_info/name"/></h1>
                <hr/>
                <p>
                  <b>Listi info:</b>
                  <br />
                  <xsl:value-of select="items/playlist_info/description"/>
                </p>
              </div>
              <!-- header end -->
              <!-- content start -->
              <div id="content">
                <table style="width: 100%">
                  <tr>
                    <th>Laulu nimi</th>
                    <th>Asukoht</th>
                    <th>Artist</th>
                  </tr>
                  <xsl:for-each select="items/item">
                    <tr>
                      <td>
                        <xsl:value-of select="songName"/>
                      </td>
                      <td>
                        <a>
                          <xsl:attribute name="href" >
                          <xsl:value-of select="location" />
                          </xsl:attribute>
                          Ava Lugu
                        </a>
                      </td>
                      <td>
                        <xsl:value-of select="artist"/>
                      </td>
                    </tr>
                  </xsl:for-each>
                </table>
              </div>
              <!-- content end -->
              <br class="clearfloat" />
              <!-- footer start -->
              <div id="footer">
                <ul>
                  <li>© 2010 Põhi lax! </li>
                </ul>
              </div>
              <!-- footer end -->
            </div>
            <!-- holder end -->
          </div>
          <!-- page end -->
        </body>
      </html>
    </xsl:template>
</xsl:stylesheet>