1 Reply Latest reply on Feb 20, 2011 8:00 AM by lazurens2011

    Displaying image from Database with php

    lazurens2011

      Hello everybody,

      I'm working on a website that displays videos courses and tutorials as my final project

      and I'm working with "Flash builder 4" the database with mySQL and the application server with php

       

      Basically, the goal is to display a datagrid that shows the manager of the website in column all the information stored on the "Course" table

      the structure of the table is :

      Course (id,img,src,title,description)

      -id : primary key

      -img : path to a photo of course {for example picture of JAVA}

      -src : path to the playlist file {xml file}

      -title : String

      -description : String too

       

      I already succeeded to display all these contents on a DataGrid, but not with the image, I couldn't display an imageon its column using the path stored on the database, I used a DataRenderer to do that, and here is my code for Renderer and the DataGrid.mxml

       

      CourseGrid.mxml

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:courseservice="services.courseservice.*">

       

       

       

      <fx:Script>

      <![CDATA[

      import Renderers.CourseDeleteRenderer;

      import Renderers.CourseImageRenderer;

       

      import mx.controls.Alert;

      import mx.events.FlexEvent;

       

      protected function dataGrid_creationCompleteHandler(event:FlexEvent):void

      {

      getAllCourseResult.token = courseService.getAllCourse();

      }

       

      ]]>

      </fx:Script>

      <fx:Declarations>

      <s:CallResponder id="getAllCourseResult"/>

      <courseservice:CourseService id="courseService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

      </fx:Declarations>

      <mx:DataGrid x="10" y="10" id="dataGrid"

      creationComplete="dataGrid_creationCompleteHandler(event)"

      dataProvider="{getAllCourseResult.lastResult}"

      width="100%">

      <mx:columns>

      <mx:DataGridColumn headerText="" dataField="img" sortable="false" itemRenderer="Renderers.CourseImageRenderer"/>

      <mx:DataGridColumn headerText="id" dataField="id"/>

      <mx:DataGridColumn headerText="src" dataField="src"/>

      <mx:DataGridColumn headerText="title" dataField="title"/>

      <mx:DataGridColumn headerText="description" dataField="description"/>

      <mx:DataGridColumn headerText="Delete" itemRenderer="Renderers.CourseDeleteRenderer"/>

      <mx:DataGridColumn headerText="Update" itemRenderer="Renderers.CourseUpdateRenderer"/>

      </mx:columns>

      </mx:DataGrid>

       

      </s:Application>

       

      CourseImageRenderer.mxml

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        xmlns:mx="library://ns.adobe.com/flex/mx"

        focusEnabled="true">

      <mx:Image source="{data}" width="60" height="60"/>

       

      </s:MXDataGridItemRenderer>

      _________________________

      Result :
      DataGrid.jpg
      Problem :
      How can I access to the path of the image, I tried to write "data.img" instead of "data" as img is the name of the column in the database that stores the path but it wasn't successful.
      I know that it not complete statement "data" because "data" is a reference to what the DataGrid provides of information that gets from the (CreationComplete) event.
      Question :

      - Can you please help me with this so I can complete displaying images by accessing to what is on the column in tha DB so I can manipulate my datas that is stored there ?

      ==> I still have some questions about the buttons to update and delete datas fomr the DataGrid, but, until now I need to access successfully to the photo and display it

       

      Thank you,

        • 1. Re: Displaying image from Database with php
          lazurens2011 Level 1

          Anyone that can help me with this ?

          Please, try this with me, I'm asking Flex developpers this might be easy for you !

          It's just question of how to access the string stored in the variable "data", when I used XML I just type the path to the repeated element like this :

          XML file :

          XML File

          <parent>

          <child>

          <repeated_child></repeated_child>

          <repeated_child></repeated_child>

          <repeated_child></repeated_child>

          </child>

          </parent>

           

          I used a Model as a reference to the xml file

          and an arrayList as a container of the repeated child

          I just write in the code "data.parent.repeated_child" to access the text in the "repeated_child"

          and here is the code, that I implemented to generate videos from xml file to display a video play list

           

          Video Playlist code(extract from XML file "data.xml")

          <fx:Declarations>

          <fx:Model id="model" source="assets/data.xml"/>

          <s:ArrayList id="products" source="{model.video}"/>

          </fx:Declarations>

           

          <mx:List  dataProvider="{products}" labelField="title"

            change="list1_changeHandler(event,List(event.currentTarget).selectedItem)" x="103" y="77" height="350" width="198"/>

           

           

          That was my goal to do that with the database.

          Please help me

          If you have other solution I still need it.

           

          Thank you,