Menampilkan Data Biner di Kontrol Web Data (VB)

Dalam tutorial ini kita melihat opsi untuk menyajikan data biner di halaman Web, termasuk tampilan file gambar dan penyediaan tautan 'Unduh' untuk file PDF.

Pendahuluan

Dalam tutorial sebelumnya, kami menjelajahi dua teknik untuk mengaitkan data biner dengan model data yang mendasari aplikasi dan menggunakan kontrol FileUpload untuk mengunggah file dari browser ke sistem file server web. Kami belum melihat cara mengaitkan data biner yang diunggah dengan model data. Artinya, setelah file diunggah dan disimpan ke sistem file, jalur ke file harus disimpan dalam rekaman database yang sesuai. Jika data disimpan langsung dalam database, maka data biner yang diunggah tidak perlu disimpan ke sistem file, tetapi harus disuntikkan ke dalam database.

Namun, sebelum kita melihat mengaitkan data dengan model data, mari kita lihat terlebih dahulu cara memberikan data biner kepada pengguna akhir. Menyajikan data teks cukup sederhana, tetapi bagaimana data biner harus disajikan? Hal ini tergantung, tentu saja, pada jenis data biner. Untuk gambar, kami mungkin ingin menampilkan gambar; untuk PDF, dokumen Microsoft Word, file ZIP, dan jenis data biner lainnya, menyediakan tautan Unduhan mungkin lebih sesuai.

Dalam tutorial ini kita akan melihat cara menyajikan data biner bersama data teks terkait menggunakan kontrol Web data seperti GridView dan DetailsView. Dalam tutorial berikutnya kita akan mengalihkan perhatian kita untuk mengaitkan file yang diunggah dengan database.

Langkah 1: Memberikan`BrochurePath`Nilai

Kolom Picture dalam Categories tabel sudah berisi data biner untuk berbagai gambar kategori. Secara khusus, Picture kolom untuk setiap rekaman menyimpan konten biner dari gambar bitmap 16 warna butir, berkualitas rendah. Setiap gambar kategori memiliki lebar 172 piksel dan tinggi 120 piksel dan mengonsumsi sekitar 11 KB. Terlebih lagi, konten biner dalam Picture kolom menyertakan header OLE 78 byte yang harus dilucuti sebelum menampilkan gambar. Informasi header ini ada karena database Northwind memiliki akarnya di Microsoft Access. Di Access, data biner disimpan menggunakan tipe data Objek OLE, yang di-tack pada header ini. Untuk saat ini, kita akan melihat cara menghapus header dari gambar berkualitas rendah ini untuk menampilkan gambar. Dalam tutorial di masa mendatang, kita akan membangun antarmuka untuk memperbarui kolom kategori Picture dan mengganti gambar bitmap ini yang menggunakan header OLE dengan gambar JPG yang setara tanpa header OLE yang tidak perlu.

Dalam tutorial sebelumnya kita melihat cara menggunakan kontrol FileUpload. Oleh karena itu, Anda dapat melanjutkan dan menambahkan file brosur ke sistem file server web. Namun, melakukannya tidak memperbarui BrochurePath kolom dalam Categories tabel. Dalam tutorial berikutnya kita akan melihat cara menyelesaikan ini, tetapi untuk saat ini kita perlu memberikan nilai secara manual untuk kolom ini.

Dalam unduhan tutorial ini Anda akan menemukan tujuh file brosur PDF di ~/Brochures folder , satu untuk setiap kategori kecuali Seafood. Saya sengaja menghilangkan penambahan brosur Seafood untuk menggambarkan cara menangani skenario di mana tidak semua rekaman memiliki data biner terkait. Untuk memperbarui Categories tabel dengan nilai-nilai ini, klik kanan pada simpul Categories dari Server Explorer dan pilih Perlihatkan Data Tabel. Kemudian, masukkan jalur virtual ke file brosur untuk setiap kategori yang memiliki brosur, seperti yang ditunjukkan Gambar 1. Karena tidak ada brosur untuk kategori Makanan Laut, biarkan nilai kolomnya BrochurePath sebagai NULL.

Gambar 1: Masukkan Nilai secara Manual untuk Categories Kolom Tabel (BrochurePathKlik untuk melihat gambar ukuran penuh)

Langkah 2: Menyediakan Tautan Unduhan untuk Brosur di GridView

BrochurePath Dengan nilai yang disediakan untuk Categories tabel, kami siap untuk membuat GridView yang mencantumkan setiap kategori bersama dengan tautan untuk mengunduh brosur kategori. Di Langkah 4 kita akan memperluas GridView ini untuk juga menampilkan gambar kategori.

Mulailah dengan menyeret GridView dari Kotak Alat ke Perancang DisplayOrDownloadData.aspx halaman di BinaryData folder. Atur GridView ke IDCategories dan melalui tag pintar GridView, pilih untuk mengikatnya ke sumber data baru. Secara khusus, ikat ke ObjectDataSource bernama CategoriesDataSource yang mengambil data menggunakan CategoriesBLL metode objek s GetCategories() .

Gambar 2: Buat ObjectDataSource Baru Bernama CategoriesDataSource (Klik untuk melihat gambar ukuran penuh)

Gambar 3: Konfigurasikan ObjectDataSource untuk Menggunakan CategoriesBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Gambar 4: Ambil Daftar Kategori Menggunakan GetCategories() Metode (Klik untuk melihat gambar ukuran penuh)

Setelah menyelesaikan wizard Konfigurasi Sumber Data, Visual Studio akan secara otomatis menambahkan BoundField ke GridView untuk Categories, , CategoryIDCategoryName, Description, dan NumberOfProductsBrochurePath s.DataColumn Lanjutkan dan hapus NumberOfProducts BoundField karena GetCategories() kueri metode tidak mengambil informasi ini. CategoryID Hapus juga BoundField dan ganti nama CategoryName properti BoundFields dan BrochurePath masing-masing menjadi Kategori dan BrosurHeaderText. Setelah membuat perubahan ini, markup deklaratif GridView dan ObjectDataSource Anda akan terlihat seperti berikut ini:

<asp:GridView ID="Categories" runat="server" 
    AutoGenerateColumns="False" DataKeyNames="CategoryID"
    DataSourceID="CategoriesDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="CategoryName" HeaderText="Category" 
            SortExpression="CategoryName" />
        <asp:BoundField DataField="Description" HeaderText="Description" 
            SortExpression="Description" />
        <asp:BoundField DataField="BrochurePath" HeaderText="Brochure" 
            SortExpression="BrochurePath" />
    </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server" 
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

Lihat halaman ini melalui browser (lihat Gambar 5). Masing-masing dari delapan kategori tercantum. Tujuh kategori dengan BrochurePath nilai memiliki nilai yang BrochurePath ditampilkan di BoundField masing-masing. Makanan laut, yang memiliki NULL nilai untuknya BrochurePath, menampilkan sel kosong.

Gambar 5: Setiap Nama, Deskripsi, dan BrochurePath Nilai Kategori Tercantum (Klik untuk melihat gambar ukuran penuh)

Daripada menampilkan teks BrochurePath kolom, kami ingin membuat tautan ke brosur. Untuk mencapai hal ini, hapus BrochurePath BoundField dan ganti dengan HyperLinkField. Atur properti HyperLinkField baru HeaderText ke Brosur, propertinya Text ke Lihat Brosur, dan propertinya DataNavigateUrlFields ke BrochurePath.

Menambahkan HyperLinkField untuk BrochurePath

Gambar 6: Tambahkan HyperLinkField untuk BrochurePath

Ini akan menambahkan kolom tautan ke GridView, seperti yang ditunjukkan Gambar 7. Mengklik tautan Lihat Brosur akan menampilkan PDF langsung di browser atau meminta pengguna untuk mengunduh file, tergantung pada apakah pembaca PDF diinstal dan pengaturan browser.

Gambar 7: Brosur Kategori Dapat Dilihat dengan Mengklik Tautan Lihat Brosur (Klik untuk melihat gambar ukuran penuh)

Gambar 8: Brosur KATEGORI PDF Ditampilkan (Klik untuk melihat gambar ukuran penuh)

Menyembunyikan Teks Brosur Tampilan untuk Kategori Tanpa Brosur

Seperti yang ditunjukkan BrochurePath Gambar 7, HyperLinkField menampilkan nilai propertinya Text (Lihat Brosur ) untuk semua rekaman, terlepas dari apakah ada nilai nonNULL untuk BrochurePath. Tentu saja, jika BrochurePath adalah NULL, maka tautan ditampilkan sebagai teks saja, seperti halnya dengan kategori Makanan Laut (lihat kembali ke Gambar 7). Daripada menampilkan Brosur Tampilan teks, mungkin bagus untuk memiliki kategori tersebut tanpa BrochurePath nilai menampilkan beberapa teks alternatif, seperti Tidak Ada Brosur yang Tersedia.

Untuk memberikan perilaku ini, kita perlu menggunakan TemplateField yang kontennya dihasilkan melalui panggilan ke metode halaman yang memancarkan output yang sesuai berdasarkan BrochurePath nilainya. Pertama-tama kami menjelajahi teknik pemformatan ini kembali di tutorial Menggunakan TemplateFields di GridView Control .

Ubah HyperLinkField menjadi TemplateField dengan memilih BrochurePath HyperLinkField lalu klik tautan Konversi bidang ini menjadi TemplateField dalam kotak dialog Edit Kolom.

Mengonversi HyperLinkField menjadi TemplateField

Gambar 9: Mengonversi HyperLinkField menjadi TemplateField

Ini akan membuat TemplateField dengan ItemTemplate yang berisi kontrol Web HyperLink yang propertinya NavigateUrl terikat ke BrochurePath nilai . Ganti markup ini dengan panggilan ke metode GenerateBrochureLink, meneruskan nilai BrochurePath:

<asp:TemplateField HeaderText="Brochure">
    <ItemTemplate>
        <%# GenerateBrochureLink(Eval("BrochurePath")) %>
    </ItemTemplate>
</asp:TemplateField>

Selanjutnya, buat Protected metode di kelas code-behind halaman ASP.NET bernama GenerateBrochureLink yang mengembalikan String dan menerima Object sebagai parameter input.

Protected Function GenerateBrochureLink(BrochurePath As Object) As String
    If Convert.IsDBNull(BrochurePath) Then
        Return "No Brochure Available"
    Else
        Return String.Format("<a href="{0}">View Brochure</a>", _
            ResolveUrl(BrochurePath.ToString()))
    End If
End Function

Metode ini menentukan apakah nilai yang diteruskan Object adalah database NULL dan, jika demikian, mengembalikan pesan yang menunjukkan bahwa kategori tidak memiliki brosur. Jika tidak, jika ada BrochurePath nilai, nilai ditampilkan dalam hyperlink. Perhatikan bahwa jika BrochurePath nilai ada, nilai tersebut diteruskan ke ResolveUrl(url) metode . Metode ini menyelesaikan url yang diteruskan, mengganti ~ karakter dengan jalur virtual yang sesuai. Misalnya, jika aplikasi berakar pada /Tutorial55, ResolveUrl("~/Brochures/Meats.pdf") akan mengembalikan /Tutorial55/Brochures/Meat.pdf.

Gambar 10 memperlihatkan halaman setelah perubahan ini diterapkan. Perhatikan bahwa bidang kategori BrochurePath Makanan Laut sekarang menampilkan teks Tanpa Brosur Yang Tersedia.

Gambar 10: Brosur Teks Tidak Tersedia Ditampilkan untuk Kategori Tersebut Tanpa Brosur (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menambahkan Halaman Web untuk Menampilkan Gambar Kategori

Saat pengguna mengunjungi halaman ASP.NET, mereka menerima HTML halaman ASP.NET. HTML yang diterima hanyalah teks dan tidak berisi data biner apa pun. Data biner tambahan apa pun, seperti gambar, file suara, aplikasi Macromedia Flash, video Pemutar Media Windows yang disematkan, dan sebagainya, ada sebagai sumber daya terpisah di server web. HTML berisi referensi ke file-file ini, tetapi tidak menyertakan konten file yang sebenarnya.

Misalnya, dalam HTML <img> elemen digunakan untuk mereferensikan gambar, dengan src atribut menunjuk ke file gambar seperti:

<img src="MyPicture.jpg" ... />

Ketika browser menerima HTML ini, ia membuat permintaan lain ke server web untuk mengambil konten biner file gambar, yang kemudian ditampilkan di browser. Konsep yang sama berlaku untuk data biner apa pun. Di Langkah 2, brosur tidak dikirim ke browser sebagai bagian dari markup HTML halaman. Sebaliknya, HTML yang dirender menyediakan hyperlink yang, ketika diklik, menyebabkan browser meminta dokumen PDF secara langsung.

Untuk menampilkan atau mengizinkan pengguna mengunduh data biner yang berada dalam database, kita perlu membuat halaman web terpisah yang mengembalikan data. Untuk aplikasi kami, hanya ada satu bidang data biner yang disimpan langsung dalam database gambar kategori. Oleh karena itu, kita memerlukan halaman yang, ketika dipanggil, mengembalikan data gambar untuk kategori tertentu.

Tambahkan halaman ASP.NET baru ke BinaryData folder bernama DisplayCategoryPicture.aspx. Saat melakukannya, biarkan kotak centang Pilih halaman master tidak dicentang. Halaman ini mengharapkan CategoryID nilai dalam querystring dan mengembalikan data biner dari kolom kategori tersebut Picture . Karena halaman ini mengembalikan data biner dan tidak ada yang lain, halaman ini tidak memerlukan markup apa pun di bagian HTML. Oleh karena itu, klik tab Sumber di sudut kiri bawah dan hapus semua markup halaman kecuali direktif <%@ Page %> . Artinya, DisplayCategoryPicture.aspx markup deklaratif harus terdiri dari satu baris:

<%@ Page Language="VB" AutoEventWireup="true" 
    CodeFile="DisplayCategoryPicture.aspx.vb" 
    Inherits="BinaryData_DisplayCategoryPicture" %>

Jika Anda melihat MasterPageFile atribut di direktif <%@ Page %> , hapus atribut tersebut.

Di kelas code-behind halaman, tambahkan kode berikut ke penanganan Page_Load aktivitas:

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    Dim categoryID As Integer = _
        Convert.ToInt32(Request.QueryString("CategoryID"))
    ' Get information about the specified category
    Dim categoryAPI As New CategoriesBLL()
    Dim categories As Northwind.CategoriesDataTable = _
        categoryAPI.GetCategoryWithBinaryDataByCategoryID(categoryID)
    Dim category As Northwind.CategoriesRow = categories(0)
    ' Output HTTP headers providing information about the binary data
    Response.ContentType = "image/bmp"
    ' Output the binary data
    ' But first we need to strip out the OLE header
    Const OleHeaderLength As Integer = 78
    Dim strippedImageLength As Integer = _
        category.Picture.Length - OleHeaderLength
    Dim strippedImageData(strippedImageLength) As Byte
    Array.Copy(category.Picture, OleHeaderLength, _
        strippedImageData, 0, strippedImageLength)
    Response.BinaryWrite(strippedImageData)
End Sub

Kode ini dimulai dengan membaca nilai CategoryID querystring ke dalam variabel bernama categoryID. Selanjutnya, data gambar diambil melalui panggilan ke CategoriesBLL metode kelas s GetCategoryWithBinaryDataByCategoryID(categoryID) . Data ini dikembalikan ke klien dengan menggunakan Response.BinaryWrite(data) metode , tetapi sebelum ini dipanggil, Picture nilai kolom header OLE harus dihapus. Ini dicapai dengan membuat Byte array bernama strippedImageData yang akan menampung tepat 78 karakter kurang dari apa yang ada di Picture kolom. Metode Array.Copy ini digunakan untuk menyalin data dari category.Picture mulai dari posisi 78 ke strippedImageData.

Properti Response.ContentType menentukan jenis MIME konten yang dikembalikan sehingga browser tahu cara merendernya. Categories Karena kolom tabel s Picture adalah gambar bitmap, jenis BITMAP MIME digunakan di sini (gambar/bmp). Jika Anda menghilangkan jenis MIME, sebagian besar browser masih akan menampilkan gambar dengan benar karena dapat menyimpulkan jenis berdasarkan konten data biner file gambar. Namun, sangat bijaksana untuk menyertakan jenis MIME jika memungkinkan. Lihat situs web Otoritas Angka yang Ditetapkan Internet untuk daftar lengkap jenis media MIME.

Dengan halaman ini dibuat, gambar kategori tertentu dapat dilihat dengan mengunjungi DisplayCategoryPicture.aspx?CategoryID=categoryID. Gambar 11 menunjukkan gambar kategori Minuman, yang dapat dilihat dari DisplayCategoryPicture.aspx?CategoryID=1.

Gambar 11: Gambar Kategori Minuman Ditampilkan (Klik untuk melihat gambar ukuran penuh)

Jika, saat mengunjungi DisplayCategoryPicture.aspx?CategoryID=categoryID, Anda mendapatkan pengecualian yang bertuliskan Tidak dapat mentransmisikan objek jenis 'System.DBNull' untuk mengetik 'System.Byte[]', ada dua hal yang mungkin menyebabkan hal ini. Pertama, Categories kolom tabel s Picture memperbolehkan NULL nilai. Halaman tersebut DisplayCategoryPicture.aspx , bagaimanapun, mengasumsikan ada non-nilaiNULL yang ada. Properti Picture tidak CategoriesDataTable dapat diakses secara langsung jika memiliki NULL nilai. Jika Anda ingin mengizinkan NULL nilai untuk kolom tersebut Picture , Anda ingin menyertakan kondisi berikut:

If category.IsPictureNull() Then
    ' Display some "No Image Available" picture
    Response.Redirect("~/Images/NoPictureAvailable.gif")
Else
    ' Send back the binary contents of the Picture column
    ' ... Set ContentType property and write out ...
    ' ... data via Response.BinaryWrite ...
End If

Kode di atas mengasumsikan bahwa ada beberapa file gambar bernama NoPictureAvailable.gif di Images folder yang ingin Anda tampilkan untuk kategori tersebut tanpa gambar.

Pengecualian ini juga dapat disebabkan jika CategoriesTableAdapter pernyataan s GetCategoryWithBinaryDataByCategoryID metode s SELECT telah kembali ke daftar kolom kueri utama, yang dapat terjadi jika Anda menggunakan pernyataan SQL ad-hoc dan Anda telah menjalankan kembali wizard untuk kueri utama TableAdapter. Periksa untuk memastikan bahwa GetCategoryWithBinaryDataByCategoryID pernyataan metode s SELECT masih menyertakan Picture kolom .

Catatan

Setiap kali DisplayCategoryPicture.aspx dikunjungi, database diakses dan data gambar kategori yang ditentukan dikembalikan. Namun, jika gambar kategori tidak berubah sejak pengguna terakhir kali melihatnya, ini adalah upaya yang-. Untungnya, HTTP memungkinkan ANG bersyarkat. Dengan GET kondisional, klien yang membuat permintaan HTTP mengirim di sepanjang If-Modified-Since header HTTP yang menyediakan tanggal dan waktu klien terakhir kali mengambil sumber daya ini dari server web. Jika konten belum berubah sejak tanggal yang ditentukan ini, server web dapat merespons dengan kode status Tidak Diubah (304) dan forgo mengirim kembali konten sumber daya yang diminta. Singkatnya, teknik ini meringankan server web agar tidak perlu mengirim kembali konten untuk sumber daya jika belum dimodifikasi sejak klien terakhir kali mengaksesnya.

Namun, untuk menerapkan perilaku ini, Anda mengharuskan Anda menambahkan PictureLastModified kolom ke Categories tabel untuk diambil ketika Picture kolom terakhir diperbarui serta kode untuk If-Modified-Since memeriksa header. Untuk informasi selengkapnya tentang If-Modified-Since header dan alur kerja GET kondisional, lihat HTTP Conditional GET untuk Peretas RSS dan Tampilan Yang Lebih Mendalam dalam Melakukan Permintaan HTTP di Halaman ASP.NET.

Langkah 4: Menampilkan Gambar Kategori dalam GridView

Sekarang setelah kita memiliki halaman web untuk menampilkan gambar kategori tertentu, kita dapat menampilkannya menggunakan kontrol Web Gambar atau elemen HTML <img> yang menunjuk ke DisplayCategoryPicture.aspx?CategoryID=categoryID. Gambar yang URL-nya ditentukan oleh data database dapat ditampilkan di GridView atau DetailsView menggunakan ImageField. ImageField berisi DataImageUrlField properti dan DataImageUrlFormatString yang berfungsi seperti HyperLinkField dan DataNavigateUrlFieldsDataNavigateUrlFormatString properti.

Mari kita tambahkan Categories GridView dengan DisplayOrDownloadData.aspx menambahkan ImageField untuk menampilkan setiap gambar kategori. Cukup tambahkan ImageField dan atur DataImageUrlField properti dan DataImageUrlFormatString ke CategoryID dan DisplayCategoryPicture.aspx?CategoryID={0}, masing-masing. Ini akan membuat kolom GridView yang merender <img> elemen yang referensi srcatributnya DisplayCategoryPicture.aspx?CategoryID={0} , di mana {0} diganti dengan nilai baris GridView.CategoryID

Menambahkan ImageField ke GridView

Gambar 12: Menambahkan ImageField ke GridView

Setelah menambahkan ImageField, sintaks deklaratif GridView Anda akan terlihat seperti menenangkan berikut:

<asp:GridView ID="Categories" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="CategoryID" DataSourceID="CategoriesDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="CategoryName" HeaderText="Category" 
            SortExpression="CategoryName" />
        <asp:BoundField DataField="Description" HeaderText="Description" 
            SortExpression="Description" />
        <asp:TemplateField HeaderText="Brochure">
            <ItemTemplate>
                <%# GenerateBrochureLink(Eval("BrochurePath")) %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:ImageField DataImageUrlField="CategoryID" 
            DataImageUrlFormatString="DisplayCategoryPicture.aspx?CategoryID={0}">
        </asp:ImageField>
    </Columns>
</asp:GridView>

Luangkan waktu sejenak untuk melihat halaman ini melalui browser. Perhatikan bagaimana setiap rekaman sekarang menyertakan gambar untuk kategori.

Gambar 13: Gambar Kategori Ditampilkan untuk Setiap Baris (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Dalam tutorial ini kami memeriksa cara menyajikan data biner. Bagaimana data disajikan tergantung pada jenis data. Untuk file brosur PDF, kami menawarkan tautan Lihat Brosur kepada pengguna yang, ketika diklik, membawa pengguna langsung ke file PDF. Untuk gambar kategori, pertama-tama kita membuat halaman untuk mengambil dan mengembalikan data biner dari database lalu menggunakan halaman tersebut untuk menampilkan setiap kategori gambar dalam GridView.

Sekarang setelah kita melihat cara menampilkan data biner, kita siap untuk memeriksa cara melakukan penyisipan, pembaruan, dan penghapusan terhadap database dengan data biner. Dalam tutorial berikutnya kita akan melihat cara mengaitkan file yang diunggah dengan catatan database yang sesuai. Dalam tutorial setelah itu, kita akan melihat cara memperbarui data biner yang ada serta cara menghapus data biner saat rekaman terkait dihapus.

Selamat Pemrograman!

Tentang Penulis

Scott Mitchell, penulis tujuh buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja sama dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com.

Terima kasih khusus untuk

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau prospek untuk tutorial ini adalah Teresa Murphy dan Dave Gardner. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

Sebelumnya Berikutnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-07-13