Author Topic: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)  (Read 21659 times)

0 Members and 1 Guest are viewing this topic.

Offline armen_sakti

  • Fox-id M.V.P
  • Hero Member
  • *
  • Posts: 1.252
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #135 on: September 24, 2011, 01:27:34 PM »
OOT to Pak Imanis ops salah Iman Miss...hehehe

Gimana sih cara quotenya kok pada beda dengan kita2 ?
kadang hasil tampilan quotenya nyebar2 gitu dan ada tulisan blockquote macam ???
dan ga tau juga quote dari mana, tpaksa baca dari atas lagi

Penasaran neh ???

Offline imanmis

  • Hero Member
  • *
  • Posts: 3.683
  • Newbie
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #136 on: September 24, 2011, 02:08:57 PM »
Quote
Gimana sih cara quotenya kok pada beda dengan kita2 ?
hihihi.. maklum pak itu namanya cara quote acak adul  :icon_biggrin: :icon_salut:

btw saya lebih suka model vfp2iis daripada westwind/activeVFP/AFP  :thumbsup:
Quote
VFP2IIS is a COM+ multithread component created by GLOBAL.ASA at the start of a session, which handles requests from IE through DEFAULT.ASP, calling on each request.
It is a mediator between the user interface of the VFP application and HTML code for IE.
Forms are not displayed directly, but VFP2IIS generate HTML code for form controls and ensure back link to server for group of events. Event and data sent from IE are mapped to VFP application as shown in the schema below

At the first request from IE (CMD=CREATEFORM...) an instance of VFP form is created, HTML code is generated and is sent back to IE – as shown by the dashed red arrow lines. An action of the user starts an event which is sent to server with data. On the server side, VFP2IIS accepts the request and starts the next base operation (sections) (the Schema of Work Flow shows in detail the collaboration between VFP2IIS and VFP application).


Offline imanmis

  • Hero Member
  • *
  • Posts: 3.683
  • Newbie
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #137 on: September 26, 2011, 04:07:07 PM »
VFP Grid to ExtJS
http://www.youtube.com/watch?v=4lxoeRHGBnc

Quote
@Om LuriDarmawan
apakah udah ada tool buat convert source dari VFP ke ExtJS?!...klo g salah liat, link dari om udah murni JS.
Memang secara tampilan di video seakan memanggil parameter dengan extention scx, tapi perlu sedikit dicurigai karena parameter tersebut dipanggil via file asp (dengan "?") yang bisa saja aslinya didalam rutin programnya yang dipanggil ya form yang dibuat dengan javascript (extjs) itu sendiri yang memang tampilan dari ExtJS ini sangat mirip dengan model tampilan Desktop.

Sorry but you are not allowed to view spoiler contents.
Sorry but you are not allowed to view spoiler contents.
Sorry but you are not allowed to view spoiler contents.
Sorry but you are not allowed to view spoiler contents.

 
« Last Edit: September 26, 2011, 04:08:59 PM by imanmis »

Offline davidmustakim

  • Fox-id M.V.P
  • Hero Member
  • *
  • Posts: 13.702
  • Awas ya...
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #138 on: January 19, 2012, 08:27:36 AM »
DENGAN INI DIUMUMKAN KOMPETISI SUNDUL BERHADIAH JACKET GRATIS DARI SAYA, AYO PARA TUKANG SUNDUL KOQ PADA TIDUR ? ? ?

Offline Arfidmail

  • Junior Member
  • *
  • Posts: 112
  • nothing is impossible so long as the logic
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #139 on: January 19, 2012, 05:04:50 PM »
IKUT NYIMAK AJA, para master  ???  :icon_study:  :icon_thumright:

Offline davidmustakim

  • Fox-id M.V.P
  • Hero Member
  • *
  • Posts: 13.702
  • Awas ya...
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #140 on: January 24, 2012, 02:16:01 AM »
dul sundul pacul cul ...

Offline davidmustakim

  • Fox-id M.V.P
  • Hero Member
  • *
  • Posts: 13.702
  • Awas ya...
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #141 on: May 02, 2012, 04:22:29 AM »
gile chingz ! ternyata udah 4 bulan lalu saya sundul terakhir, trasax kykx kemaren...
ufft... berarti 1 Juli bentar lagi ya

Offline Arfidmail

  • Junior Member
  • *
  • Posts: 112
  • nothing is impossible so long as the logic
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #142 on: May 05, 2012, 12:46:55 PM »
gile chingz ! ternyata udah 4 bulan lalu saya sundul terakhir, trasax kykx kemaren...
ufft... berarti 1 Juli bentar lagi ya
jadi nanti topiknya terbuat dari BAHAN apa  ??? ..

sip mr. imanmis sampai buat link ke kaskus tapi masih sepi    :sad5: :sad5: :sad5: :sad5:

http://www.kaskus.us/showthread.php?t=14241502

Offline hanstedjakusuma

  • Senior Member
  • *
  • Posts: 698
  • echo "VisualFoxpro";
    • demo.ossbp.com
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #143 on: May 17, 2012, 12:17:56 AM »
Ayoo dilanjut lagiii..
Bahas sesuai topic aja jangan melenceng kemana2.. :icon_biggrin:
Tujuan utama : untuk meningkatkan User Interface VFP supaya interaksi program ( hasil app yang dibuat menggunakan VFP ) bagi para pemakai menjadi lebih mudah dan menarik

Contoh ke-1
Sedikit pembuktian bagaimana kita bisa memanggil fungsi/method VFP dari javascript:
(Thanks to Rick Strahl)

*!* index.html
Code: [Select]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
  var ovfp=null;
  function setvfpobject(tovfp){
    ovfp = tovfp;
    }
    function callvfpfunc() {
    ovfp.TampilPesan();
    }
</script>
</head>
<body>
<a href="blank" onClick="callvfpfunc();">Memanggil fungsi Visual FoxPro dari JavaScript.</a>
<br>
<br>
<a href="blank" onClick="ovfp.TampilPesan();">Memanggil fungsi Visual FoxPro dari HTML.</a>
</body>
</html>


*!* demo.prg
Code: [Select]
oForm = CREATEOBJECT("form1")
oForm.Show()
READ EVENTS

DEFINE CLASS form1 AS form

  Height = 456
  Width = 636
  ShowWindow = 2
  AutoCenter = .T.
  Caption = "Demo VFP - JavaScript"
  Name = "frmDemo"
  lActive=.F.

  ADD OBJECT oie AS olecontrol WITH ;
    OleClass = 'Shell.Explorer.2', ;
    Top = 0, ;
    Left = 0, ;
    Height = 456, ;
    Width = 636, ;
    Anchor = 15, ;
    Name = "oIE"

  PROCEDURE waitforreadystate
    LPARAMETERS tnReadyState, tnMilliSeconds
    IF EMPTY(m.tnReadyState)
      m.tnReadyState = 4
    ENDIF
    IF EMPTY(m.tnMilliSeconds)
      m.tnMilliSeconds = 4000
    ENDIF
    DECLARE INTEGER Sleep IN WIN32API INTEGER nMSecs
    LOCAL lnX
    m.lnX = 0
    DO WHILE (this.oIE.ReadyState != m.tnReadyState) AND (m.lnX < m.tnMilliSeconds)
      DOEVENTS
      m.lnX = m.lnX + 1
      Sleep(1)
    ENDDO
    IF m.lnX < m.tnMilliSeconds
      RETURN .T.
    ENDIF
    RETURN .F.
  ENDPROC

  PROCEDURE TampilPesan
    =MESSAGEBOX("Pesan ini adalah fungsi VFP!")
  ENDPROC

  PROCEDURE Destroy
    CLEAR EVENTS
  ENDPROC

  PROCEDURE Activate
    IF !this.lActive
      this.lActive = .T.
      this.oIE.Navigate(SYS(5)+CURDIR()+"index.html")
      IF this.WaitForReadyState(4, 10000)
        this.oIE.Document.Script.setvfpobject(this)
      ENDIF
    ENDIF
  ENDPROC

  PROCEDURE oie.BeforeNavigate2
    LPARAMETERS pdisp, url, flags, targetframename, postdata, headers, cancel
    Cancel = .T.
  ENDPROC

  PROCEDURE oie.Refresh
    NODEFAULT
  ENDPROC
ENDDEFINE


Contoh ke-2
Oh ya rekan2.. ini part ke dua untuk sample script (yg sederhana dulu ya..)
Sample ini akan menggunakan ajax untuk me-load hasil yang sudah kita input dari form tanpa harus memanggil ulang html, dan juga di contohkan bagaimana nilai-nilai dari hasil input bisa diterima langsung oleh VFP dan bisa diolah dari dalam VFP.

Sebelum kelupaan, mulai saat ini kita tidak lagi memakai Microsoft Webbrowser ActiveX control, tapi menggunakan VBMHWB ActiveX Control.
Kelebihan dari control ini adalah, pertama free, kedua kita bisa langsung mengkontrol user interface dari browser intu sendiri tanpa harus membuat dan mem-bind event handler.
Dan yg paling penting (bagi saya), control ini support windows theme untuk elemen inputnya (ini salah satu kekurangan dari MS-Webbrowser activex)

Silahkan download disini:
http://vbmhwb.sourceforge.net/

Simpan index.html dan demo.prg di suatu folder dan copykan jquery.js ke folder yg sama.


*!* index.html
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    var oVFP = null;
    function setvfpobject(oVFPObject) {
        oVFP = oVFPObject;
        }
    // ini fungsi loader-nya !
    function loaddiv(param) {
        $.ajax({
            type: "POST",
            url: oVFP.RenderDiv(param),
            data: "",
            success: function(html) {
                $("#isi_form").html(html);
                }
            });
        }
</script>
</head>
<body>
    <form name="my_form" method="post" action="">
        <input id="my_name" type="text" maxlength="40" value=""/><br />
        <textarea id="my_address"></textarea><br /><br />
        <input id="send" type="submit" class="button" value=" Send "/>
    </form>
    <hr />
    <div id="isi_form"></div>
    <hr />
</body>
<script type="text/javascript">
    // buat agar diawal focus ke text nama
    $("#my_name").focus();
    // intercept event click di submit button
    // dan kirim data ke VFP
    $("#send").click(function() {
        var data = "?my_name=" + $("#my_name").val() + "&my_address=" + $("#my_address").val();
        loaddiv(data);
        return false;
        });
</script>
</html>


*!* demo.prg
Code: [Select]
oForm = CREATEOBJECT("form1")
oForm.Show()


DEFINE CLASS form1 AS form
    Height = 420
    Width = 672
    AutoCenter = .T.
    Caption = "Demo VFP - Ajax"
    Name = "Form1"

    ADD OBJECT obrowser AS olecontrol WITH ;
        OleClass = "VbMHWB.vbWB.1", ;
        Top = 0, ;
        Left = 0, ;
        Height = 420, ;
        Width = 672, ;
        Anchor = 15, ;
        Name = "oBrowser"

    PROCEDURE waitforreadystate
        LPARAMETERS tnReadyState, tnMilliSeconds
        IF EMPTY(tnReadyState)
            tnReadyState = 4
        ENDIF
        IF EMPTY(m.tnMilliSeconds)
            tnMilliSeconds = 4000
        ENDIF
        LOCAL lnX
        lnX = 0
        DECLARE LONG Sleep IN WIN32API AS API_Sleep LONG
        DO WHILE (this.oBrowser.ReadyState(1) != tnReadyState) AND (lnX < tnMilliSeconds)
            DOEVENTS
            lnX = lnX + 1
            API_Sleep(1)
        ENDDO
        IF lnX < tnMilliSeconds
            RETURN .T.
        ENDIF
        RETURN .F.
    ENDPROC

    PROCEDURE renderdiv
        LPARAMETERS tcData

        LOCAL lcHTML, lcFile

        IF !EMPTY(tcData)
            *!* simple parse data
            LOCAL lcNama, lcAlamat
            lcNama = GETWORDNUM(tcData, 1, "&")
            lcNama = SUBSTR(lcNama, AT("=", lcNama) + 1)
            lcAlamat = GETWORDNUM(tcData, 2, "&")
            lcAlamat = SUBSTR(lcAlamat, AT("=", lcAlamat) + 1)

            TEXT TO lcHTML TEXTMERGE NOSHOW
                Nama anda adalah: <<lcNama>> <br />
                Alamat anda adalah: <<lcAlamat>><br /><br />
            ENDTEXT
        ELSE
            lcHTML = ""
        ENDIF

        lcFile = LOWER(SYS(5) + CURDIR()) + "_render.html"
        STRTOFILE(lcHTML, lcFile)

        RETURN [file:///] + CHRTRAN(lcFile, "\", "/")
    ENDPROC

    PROCEDURE Init
        *!* nilai konstan ini bisa diambil dgn menggunakan
        *!* tools menu -> object browser
        *!* dan load file vbmhwb.dll
        #DEFINE WBDOCHOSTUIFLAG_NO3DBORDER       4
        #DEFINE WBDOCHOSTUIFLAG_SCROLL_NO         8
        #DEFINE WBDOCHOSTUIFLAG_THEME             262144
        #DEFINE WBDOCDOWNLOADCTLFLAG_DLIMAGES     16
        #DEFINE WBDOCDOWNLOADCTLFLAG_VIDEOS       32
        #DEFINE WBDOCDOWNLOADCTLFLAG_BGSOUNDS     64

        *!* set agar jendela browser menjadi flat
        *!* dan mendukung windows theme control
        *!* optional, bisa tanpa scrollbar!
        LOCAL lnUIFlags
        lnUIFlags    = WBDOCHOSTUIFLAG_NO3DBORDER
        lnUIFlags = BITOR(lnUIFlags, WBDOCHOSTUIFLAG_THEME)
        lnUIFlags = BITOR(lnUIFlags, WBDOCHOSTUIFLAG_SCROLL_NO)
        this.oBrowser.DocumentHostUiFlags = lnUIFlags

        *!* register jendela browser
        *!* ID yg dihasilkan akan bernilai 1,
        *!* nilai ini akan dipakai sebagai parameter pertama untuk fungsi yg lain
        this.oBrowser.AddBrowser(0, .T.)

        *!* set browser agar bisa mendownload selain teks html
        LOCAL lnDownloadFlags
        lnDownloadFlags = WBDOCDOWNLOADCTLFLAG_DLIMAGES
        lnDownloadFlags = BITOR(lnDownloadFlags, WBDOCDOWNLOADCTLFLAG_BGSOUNDS)
        lnDownloadFlags = BITOR(lnDownloadFlags, WBDOCDOWNLOADCTLFLAG_VIDEOS)
        this.oBrowser.DocumentDownloadControlFlags = lnDownloadFlags

        *!* navigasi ke halaman awal yg berada di folder aplikasi
        *!* nama file boleh bukan 'indek.html' dan lokasi boleh diubah
        this.oBrowser.Navigate(1, SYS(5)+CURDIR()+[index.html])

        *!* tunggu sampai browser siap
        IF this.WaitForReadyState(4, 10000)
            *!* set pointer VFP agar dikenal di javascript
            this.oBrowser.Document(1).Script.setvfpobject(this)
        ENDIF
    ENDPROC

    PROCEDURE Load
        SET SAFETY OFF
    ENDPROC
ENDDEFINE


...
Saya lagi siapkan contoh berikutnya nih, Insya Allah dalam waktu dekat saya post.
Masih ditunggu Contoh ke-3 nya...  :icon_biggrin:

Offline hanstedjakusuma

  • Senior Member
  • *
  • Posts: 698
  • echo "VisualFoxpro";
    • demo.ossbp.com
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #144 on: May 18, 2012, 09:38:41 PM »
Pada Contoh ke-2, di bawah baris..
this.obrowser.document(1).script.setvfpobject(this)

baiknya ditambahkan..
this.obrowser.setfocusw(1)

Supaya focus ke olecontrol browsernya..
Kalau pakai setfocus biasa g mau.. form tetap yang dapat focus..
ampe gemes cari dimana2.. akhirnya ketemu juga.. :icon_biggrin:

Offline davidmustakim

  • Fox-id M.V.P
  • Hero Member
  • *
  • Posts: 13.702
  • Awas ya...
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #145 on: May 19, 2012, 09:58:27 AM »
Pada Contoh ke-2, di bawah baris..
this.obrowser.document(1).script.setvfpobject(this)

baiknya ditambahkan..
this.obrowser.setfocusw(1)

Supaya focus ke olecontrol browsernya..
Kalau pakai setfocus biasa g mau.. form tetap yang dapat focus..
ampe gemes cari dimana2.. akhirnya ketemu juga.. :icon_biggrin:
gilee... butuh 11 bulan hanya untuk set focus?

Offline hanstedjakusuma

  • Senior Member
  • *
  • Posts: 698
  • echo "VisualFoxpro";
    • demo.ossbp.com
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #146 on: May 19, 2012, 10:06:45 AM »
Pada Contoh ke-2, di bawah baris..
this.obrowser.document(1).script.setvfpobject(this)

baiknya ditambahkan..
this.obrowser.setfocusw(1)

Supaya focus ke olecontrol browsernya..
Kalau pakai setfocus biasa g mau.. form tetap yang dapat focus..
ampe gemes cari dimana2.. akhirnya ketemu juga.. :icon_biggrin:
gilee... butuh 11 bulan hanya untuk set focus?
Waduuuuhh sama sekali tidak benar itu...
Sorry but you are not allowed to view spoiler contents.

Offline hanstedjakusuma

  • Senior Member
  • *
  • Posts: 698
  • echo "VisualFoxpro";
    • demo.ossbp.com
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #147 on: May 20, 2012, 03:15:05 AM »
Snapshot..

Sorry but you are not allowed to view spoiler contents.

Offline davidmustakim

  • Fox-id M.V.P
  • Hero Member
  • *
  • Posts: 13.702
  • Awas ya...
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #148 on: May 20, 2012, 04:55:56 AM »
Snap Thought

Sorry but you are not allowed to view spoiler contents.

Offline hanstedjakusuma

  • Senior Member
  • *
  • Posts: 698
  • echo "VisualFoxpro";
    • demo.ossbp.com
Re: VFP + SQL + (jQuery,Ajax,Web Style UI,No Webserver)
« Reply #149 on: May 20, 2012, 06:07:23 AM »
Snapshot..

Sorry but you are not allowed to view spoiler contents.

To do..
- menambahkan jquery highlight..
- menyisipkan/menampilkan ruang note di menu item
- memisahkan elemen html antara ruang data dan ruang note menu item agar pemfilteran/pencarian text hanya terbatas pada ruang data menu item
- menambahkan proses pencarian pada ruang data menu item, mulai dari kiri..
( yang ada saat ini baru proses filter..  :icon_biggrin: )